Forms
Date picker
Select a single date from a calendar with month and year dropdowns. For a start and end together use Date range picker.
Purpose
A field that opens a calendar. Month and year dropdowns matter more than they look: without them, picking a date of birth means dozens of clicks.
Example
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | Date | undefined | — | The currently selected date (controlled). |
onChange | ((date: Date | undefined) => void) | undefined | — | Called with the new date, or `undefined` when the selection is cleared. |
placeholder | string | undefined | "Pick a date" | Trigger text shown when no date is selected. |
id | string | undefined | — | `id` forwarded to the trigger button, for pairing with a `<Label htmlFor>`. |
className | string | undefined | — | — |
SwitchDraft
A setting that takes effect immediately, with no save step. If the change only applies when a form is submitted, use a checkbox instead.
Quantity toggleDraft
A numeric stepper for small counted quantities such as claim line items or dependant counts. Arrow keys step, and values clamp to min and max.