Skip to content

Commit

Permalink
Update src/content/design-system/patterns/date-of-birth
Browse files Browse the repository at this point in the history
  • Loading branch information
KateMacdonald authored Apr 30, 2024
1 parent 484ba22 commit af40f97
Showing 1 changed file with 0 additions and 31 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,37 +3,6 @@
This pattern is defined as a ‘memorable date’, of which users will know the answer. Using hint text helps the user to understand the format, while the three separate boxes with Day, Month, Year labels removes ambiguity about which comes first, day or month. They also serve an important part in helping assistive technologies recognise and distinguish all three.

```tsx
<FormGroup>
<FormLabel>Date of birth</FormLabel>
<FormHint>Example: 31 3 1980</FormHint>
<fieldset className="flex gap-4">
<Field label="Day" labelSize="small">
<Input
type="number"
size="large"
pattern="[0-9]*"
min="1"
max="31"
autoComplete="bday-day"
/>
</Field>
<Field label="Month" labelSize="small">
<Input
type="number"
size="large"
pattern="[0-9]*"
min="1"
max="12"
autoComplete="bday-month"
/>
</Field>
<Field label="Year" labelSize="small">
<Input className="w-14" type="number" size="large" pattern="[0-9]*" autoComplete="bday-year" />
</Field>
</fieldset>
</FormGroup>


<FormGroup>
<FormLabel>Date of birth</FormLabel>
<FormHint>Example: 31 3 1980</FormHint>
Expand Down

0 comments on commit af40f97

Please sign in to comment.