---
name: DateInputField
menu: Components
---

import PropsTable from 'website-src/components/PropsTable'
import { livePreviewStyle } from '../helpers/constants'
import DateInputField from './DateInputField'
import cactusTheme from '@repay/cactus-theme'
import { LiveProvider, LiveEditor, LiveError, LivePreview } from 'react-live'

# DateInputField

This is the field version of the `DateInput` which no longer requires the `id` but it still requires `name` and now requires a `label`.

### Try it out

export const code = `<DateInputField name="date-input-field" label="Date with error" error="Here is an example error message" />`

<LiveProvider code={code} scope={{ DateInputField }}>
  <LiveEditor style={livePreviewStyle} />
  <LiveError />
  <LivePreview />
</LiveProvider>

## Best practices

As a field, it has accessibility built in; so it is best to use this Field instead of the standalone `DateInput` when possible.

Like the `DateInput`, when the provided value is a string, you should be explicit and provide a format; otherwise it defaults to a psuedo ISO format which is missing time zone.

## Basic usage

The `DateInputField` is the standardized

```jsx
import React from 'react'

function initValues() {
  return {
    date_field: '',
  }
}

export default function Form() {
  const [values, setValues] = React.useState(initValues)
  const handleChange = React.useCallback(
    ({ target }) => {
      setValues(v => ({ ...v, [target.name]: target.value }))
    },
    [setValues]
  )

  return (
    <form onSubmit={event => event.preventDefault()}>
      <DateInputField
        name="date_field"
        label="Date Field"
        value={values.date_field}
        onChange={handleChange}
      />
    </form>
  )
}
```

## Properties

<PropsTable of={DateInputField} />