Color Picker
Color Picker component is a form element that allows users to select a color
Playground
Experiment with all the properties of the DatePicker component in real time.
Properties
label
Sets the field label.
errorMessage
Message shown when the field is invalid.
helperText
Shows additional guidance below the field.
minDate
Earliest selectable date.
maxDate
Latest selectable date.
variant
Changes the visual style.
displayFormat
Sets how the selected date is formatted in the input.
type
Selects how the picker is presented.
size
Adjusts the input size.
invalid
Marks the field as invalid.
disabled
Disables all interactions.
Is Date DisabledisDateDisabled
Custom function to disable specific dates in the calendar, such as weekends.
Controlled Componentvalue, onChange
Control the selected date using state (value and onChange).
API Reference
Props
Prop | Default | Type |
|---|---|---|
minDate | undefined | Date |
maxDate | undefined | Date |
disabled | false | boolean |
size | "medium" | "tiny" | "small" | "medium" | "large" |
type | "dropdown" | "dropdown" | "modal" | "inline" |
variant | "solid" | "solid" | "soft" |
isDateDisabled | undefined | (date: Date) => boolean |
label | "" | string |
displayFormat | "medium" | "full" | "long" | "medium" | "short" |
helperText | "" | string |
errorMessage | "" | string |
invalid | false | boolean |
value | undefined | Date |
onChange | undefined | (date: Date | undefined) => void |