Skip to content

Demos

Empty

Dato

Code Editor
<Field.Date onChange={(value) => console.log('onChange', value)} />

Placeholder

Dato

Code Editor
<Field.Date
  placeholder="Enter a date"
  onChange={(value) => console.log('onChange', value)}
/>

Label

Label text

Code Editor
<Field.Date
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
/>

Label and value

Label text

Code Editor
<Field.Date
  value="2023-01-16"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
/>

With help

Label text

Code Editor
<Field.Date
  value="2023-01-16"
  label="Label text"
  help={{
    title: 'Help is available',
    contents:
      'Kindness and helping others will return to you when you least expect it, and maybe when you need it.',
  }}
  onChange={(value) => console.log('onChange', value)}
/>

Disabled

Label text

Code Editor
<Field.Date
  value="2023-01-16"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  disabled
/>

Error

This is what is wrong...
Label text

Code Editor
<Field.Date
  value="2023-01-16"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  error={new FormError('This is what is wrong...')}
/>

Validation - Required

Label text

Code Editor
<Field.Date
  value="2023-01-16"
  label="Label text"
  onChange={(value) => console.log('onChange', value)}
  required
/>