Date Input

Creating a date input in this way is useful for collecting data like date of birth. For selecting a range of dates, it's recommended that you use the native DatePicker atom.

Code

import { Grid, TextField } from '@krakentech/coral'

<Grid templateColumns="repeat(12, 1fr)" gap="md">
  <GridItem colSpan={4}>
      <TextField label="Day (DD)" type="number" min="1" max="31" />
  </GridItem>
  <GridItem colSpan={4}>
      <TextField label="Month (MM)" type="number" min="1" max="12" />
  </GridItem>
  <GridItem colSpan={4}>
      <TextField label="Year (YYYY)" type="number" />
  </GridItem>
</Grid>

Interactive Example