Design Tokens for Mesh have just been released!
Skip to content

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.

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

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.

PropTypeDefaultDescription
valuestringThe input value.
onChangefunctionA 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.