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.
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.
import DateTextbox from '@nib-components/date-textbox';
<DateTextbox/> is wrapped in a
<FormControl/>, all FormControl props such as
disabled will be passed down to this component. This includes the
label which will align with the
for attribute on the
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.
|A change handler.
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.