---
title: Memorable date (React) - USWDS + Tailwind
description: Collect dates such as a date of birth with a month selector and
  separate day and year fields in the memorable date pattern.
---

# 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

```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.

| Prop | Type | Description |
| - | - | - |
| `disabled` | `boolean` | Sets data-disabled on Root. Pass native disabled to Month, Day, and Year to disable their controls. |
| `invalid` | `boolean` | Sets data-invalid on Root. Does not validate the date or update the child controls. |

| Attribute | Value | Purpose |
| - | - | - |
| `data-disabled` | `Present when disabled` | Style the disabled state. |
| `data-invalid` | `Present when invalid` | Style 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.