Input fields, textareas and select fields
Input fields and text areas, or textboxes, are used to enter or edit text or numbers.
Use when
- The user needs to enter or edit data.
Demo enabled on this page! The enhanced keyboard-focus behaviour is active on this page — the .keyboard-focus class is added to each .form-group while a control is keyboard-focused, and removed on blur, click or typing. Try pressing Tab to navigate through the form fields. Read more in the Forms accessibility guidelines.
Design
Inputs and textareas
Most common form control, text-based input fields. Includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel and color.
Select fields
States
Disabled state
Add the disabled attribute on an input to prevent user input and trigger a slightly different look. You can also add it as class on each element that you need to be disabled from your form or add it as attribute or class to a <fieldset> to disable all the controls within the <fieldset> at once.
If your background is white, you have the option to have a grey readonly input using .inverted class.
The chevron icon on a disabled <select> renders in the same colour as on an enabled one. Native <select> is a replaced element and does not reliably support ::before / ::after pseudo-elements, so the icon cannot be recoloured in CSS without duplicating the SVG. The disabled state is still clearly conveyed by the field's faded background, lighter border, and disabled text colour.
Readonly state
Add the readonly attribute on an input to prevent user input. Readonly fields are displayed with a muted background and border to indicate they are not editable.
The <select> element does not natively support the readonly attribute. To prevent interaction, combine readonly with tabindex="-1". The styling is applied via CSS, but the browser will not enforce readonly behaviour on its own.
Input group
Place one button or dropdown on either side of an input, and wrap those elements in a div with .input-group class.
We do not support multiple buttons on a single side, or multiple form-controls/inputs in a single input group.
Additional examples
The following examples are also used by our Playwright CSS property assertion tests.
Input group button wrapper
Buttons inside an input group can be wrapped in .input-group-btn for flexbox grouping.
Input group button sizes
Buttons inside an input group are automatically reduced to 32 px to match form controls, unless .btn-md or .btn-lg is applied.
The following examples intentionally use .btn-md (40 px) and .btn-lg (48 px) to demonstrate that explicit size modifiers override the default 32 px input-group button height. These will be taller than the form control by design.