<State initial={undefined}>
{([date, setDate]) => (
<Form>
<DatePicker value={date} onChange={(v) => setDate(v)} />
</Form>
)}
</State>
States
Default Value
<State initial={new Date()}>
{([date, setDate]) => (
<Form>
<Form.DatePicker
label='Date Label'
description="Description goes here..."
value={date}
onChange={(v) => setDate(v)}
/>
</Form>
)}
</State>
Label Help
Labels can have a help icon with a tooltip to provide additional context to a label.
<State initial={undefined}>
{([date, setDate]) => (
<Form>
<Form.DatePicker
label='Date Label'
value={date}
labelProps={{
help: "This is help text",
direction: "r"
}}
onChange={(v) => setDate(v)} />
</Form>
)}
</State>
Required and Optional
A visual indicator can be applied on a Date Picker's label.