Stable

Date Textbox

The date textbox is a textbox with unique features. The most notable being restricted formatting that caters to the dd/mm/yyyy format for a date. It is also different from a standard textbox in that when selected, it displays the native date picker for a device when one is detected.

GitHub, opens in a new tab·Storybook, opens in a new tab·Playroom, opens in a new tab·Figma, opens in a new tab

Installation

bash

npm install @nib-components/date-textbox

As a form input, @nib-components/form-control must wrap this component to provide an accessible label, help text, and validation styling.

Usage

jsx

import DateTextbox from '@nib-components/date-textbox';

Interactive demo

jsx

() => {
  const [value, setValue] = React.useState('');
  return (
    <FormControl label="Date" id="date" name="date" valid={false} validated={false} error="Please enter a date.">
      <DateTextbox onChange={e => setValue(e.target.value)} value={value} />
    </FormControl>
  );
};

() => {
  const [value, setValue] = React.useState('');
  return (
    <FormControl label="Date" id="date" name="date" valid={false} validated={false} error="Please enter a date.">
      <DateTextbox onChange={e => setValue(e.target.value)} value={value} />
    </FormControl>
  );
};

Props

As the <DateTextbox/> is wrapped in a <FormControl/>, all FormControl props such as valid, validated, and disabled will be passed down to this component. This includes the id, name and label which will align with the for attribute on the <label>.

The DateTextbox is an extension of Textbox, therefore, all of the parent props are valid for this component.

All props passed directly to <DateTextbox/> will be applied to the underlying <input> as attributes.

Prop	Type	Default	Description
`value`	string		The `input` value.
`onChange`	function		A change handler.

Considerations

A date textbox is best used when specifically requesting a single date that includes day, month and year.

Label your date textbox as you would a Textbox.

When the user enters invalid input, provide them with an informative validation message, for example: “Were you really born in 1492?”.

Ensure the date textbox allows enough width for the user to type their input without truncation.

If the interface requires a date range consider using the Date Picker component.