Skip to main content
USWDS + Tailwind

Memorable date

Collect dates such as a date of birth with a month selector and separate day and year fields in the memorable date pattern.

Examples

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px
Date of birth
For example: January 19 2000
memorable-date-demo.tsx
import { Fieldset, MemorableDate } from '@uswds-tailwind/react'


export default function MemorableDateDemo() {
  return (
    <MemorableDate.Root>
      <MemorableDate.Legend>Date of birth</MemorableDate.Legend>
      <Fieldset.Description>For example: January 19 2000</Fieldset.Description>
      <MemorableDate.Control>
        <MemorableDate.Month />
        <MemorableDate.Day />
        <MemorableDate.Year />
      </MemorableDate.Control>
    </MemorableDate.Root>
  )
}

Component API

Use the fieldset Root with a Legend and the Month, Day, and Year controls.

Root<fieldset>

Groups the date fields.

PropTypeDescription
disabledbooleanSets data-disabled on Root. Pass native disabled to Month, Day, and Year to disable their controls.
invalidbooleanSets data-invalid on Root. Does not validate the date or update the child controls.
AttributeValuePurpose
data-disabledPresent when disabledStyle the disabled state.
data-invalidPresent when invalidStyle the error state.

Legend<legend>

Names the date group.

Control<div>

Arranges the three date fields.

Month<select>

Selects the month.

Day<input>

Receives the day number.

Year<input>

Receives the year number.