Components

Date Input

A masked field for typing dates without a picker.

Usage

Basic

HTML

<bs:bsui-date-input placeholder="YYYY-MM-DD" />

Labelled field

Paired with a label and help text the way it appears inside a real form.

Start date

Bookings open the day after this date.

HTML

<bs:bsui-field>
  <bs:bsui-field-label text="Start date" />
  <bs:bsui-date-input name="start_date" placeholder="Pick a start date" />
  <bs:bsui-field-description text="Bookings open the day after this date." />
</bs:bsui-field>

Date range

Two inputs side by side, each submitting under its own name.

From

HTML

<bs:bsui-stack direction="row" gap="4" align="start">
  <bs:bsui-field>
    <bs:bsui-field-label text="From" />
    <bs:bsui-date-input name="from" placeholder="Check in" />
  </bs:bsui-field>
  <bs:bsui-field>
    <bs:bsui-field-label text="To" />
    <bs:bsui-date-input name="to" placeholder="Check out" />
  </bs:bsui-field>
</bs:bsui-stack>

Disabled

The trigger and the calendar button both stop responding.

HTML

<bs:bsui-date-input placeholder="Locked until renewal" disabled="true" />

Attributes

Attribute	Type	Default
`name`	`text`	—
`placeholder`	`text`	`Pick a date`
`disabled`	`toggle`	`false`
`nameAlt`	`text`	—
`onChange`	`text`	—