Form Inputs

Style <input>, <select>, and <textarea> elements with Chassis CSS's custom appearance, sizing, and states using a single .form-input class.

@layer components

Component tokens

Examples in this documentation kept simple to focus on the core concepts. In production, always pair form inputs with appropriate labels and ARIA attributes to ensure accessibility and usability for all users.

Overview

Use the .form-input class to style <input>, <select>, and <textarea> elements with a consistent appearance, sizing, and states.

<input class="form-input" type="text" placeholder="Example text input">
<select class="form-input">
  <option value="">Example select</option>
  <option value="option1">Option one</option>
  <option value="option2">Option two</option>
</select>
<textarea class="form-input" placeholder="Example textarea"></textarea>

Caret icon for select inputs is implemented using a background image and supports both disabled state and dark mode. Caret icon can be customized with Chassis Tokens or by overriding the CSS variables at runtime.

Select

Use the multiple attribute to allow multiple selections.

<select class="form-input" multiple>
  <option value="option1">Option one</option>
  <option value="option2">Option two</option>
  <option value="option3">Option three</option>
</select>

Use the size attribute to control the number of visible options.

<select class="form-input" size="3">
  <option value="option1">Option one</option>
  <option value="option2">Option two</option>
  <option value="option3">Option three</option>
</select>

Textarea

Use the rows attribute to control the height of the textarea.

<textarea class="form-input" placeholder="Example textarea with rows attribute" rows="4"></textarea>

Sizing

Modify input sizes with the .sm and .lg modifier classes to maintain consistent component dimensions throughout your interface.

<input class="form-input lg" type="text" placeholder="Large input">
<input class="form-input" type="text" placeholder="Default input">
<input class="form-input sm" type="text" placeholder="Small input">

States

Chassis CSS provides consistent styling for various input states to communicate status and interactivity to users.

Disabled inputs

Apply the HTML disabled attribute to inputs to indicate they're not interactive. Disabled inputs receive:

Muted appearance with lighter colors
Removal of pointer events
Prevention of focus and keyboard interaction

<input class="form-input" type="text" placeholder="Disabled input" disabled>
<input class="form-input" type="text" value="Disabled input with value" disabled>
<select class="form-input" disabled>
  <option value="">Disabled select</option>
  <option value="option1">Option one</option>
  <option value="option2">Option two</option>
</select>

Readonly inputs

Use the readonly attribute to prevent users from changing an input's value while keeping it selectable. Unlike disabled inputs, readonly inputs remain focusable for easier form navigation.

<input class="form-input" type="text" value="Readonly input" readonly>
<input class="form-input" type="text" value="Readonly disabled input" readonly disabled>

Plaintext inputs

For displaying non-editable data blending in your design, use the combination of readonly and the .plaintext class to remove form styling while preserving proper spacing within your form layout.

<input class="form-input plaintext" readonly type="text" value="email@example.com">
<input class="form-input" type="password" autocomplete="current-password" placeholder="Password">

<form class="row g-md">
  <div class="col-auto">
    <input class="form-input plaintext" readonly type="text" value="email@example.com">
  </div>
  <div class="col-auto">
    <input class="form-input" type="password" autocomplete="current-password" placeholder="Password">
  </div>
  <div class="col-auto">
    <button type="submit" class="button primary">Submit</button>
  </div>
</form>

Input types

Chassis CSS supports all standard HTML input types, including text, password, email, number, date, and more. Apply the .form-input class to any <input> element to ensure consistent styling across your forms.

File input

Chassis CSS enhances HTML file inputs with consistent styling while maintaining browser-specific file selection functionality. Apply the .form-input class to <input type="file"> elements for standardized appearance.

<input class="form-input" type="file">
<input class="form-input" type="file" multiple>
<input class="form-input" type="file" disabled>

Color input

Use type="color" with the .form-input class to create a consistent color picker without additional classes.

<input class="form-input" type="color" value="#00a4cc">

Use display and sizing utilities to control the width and layout of color inputs within your forms.

<input class="form-input d-inline-flex w-25 me-md" type="color" value="#00a4cc">
<input class="form-input d-inline-flex w-25" type="color" value="#f55200">

Date & time

Use the appropriate type attribute to create date and time inputs with native browser controls for selecting dates and times.

<input class="form-input" type="datetime-local" value="2026-09-24T22:29">
<input class="form-input" type="date" value="2026-09-24">
<input class="form-input" type="time" value="22:29">

Datalists

Enhance text inputs with autocompletion suggestions using the HTML5 <datalist> element. This provides a hybrid between free text entry and select dropdowns, giving users flexible input options.

<input type="text" class="form-input" list="datalistOptions" placeholder="Type to search...">
<datalist id="datalistOptions">
  <option value="Option one"></option>
  <option value="Option two"></option>
  <option value="Option three"></option>
</datalist>

Ghost inputs

Ghost inputs are a special type of input, that leaves styling to a wrapper element, allowing for more flexible form components and custom designs.

Since .ghost-input removes the input’s focus outline, so consider using :focus-within on a parent element to provide a visible focus indicator.

<input class="ghost-input" type="search" placeholder="Search items">

Form input wrapper

Use .form-input wrapper to provide consistent sizing and spacing for ghost inputs.

<div class="form-input">
  <input class="ghost-input" type="search" placeholder="Search items">
</div>
<div class="form-input">
  <input class="ghost-input" type="search" placeholder="Search items" disabled>
</div>
<div class="form-input lg">
  <input class="ghost-input" type="search" placeholder="Search items">
</div>
<div class="form-input sm">
  <input class="ghost-input" type="search" placeholder="Search items">
</div>

CSS

Chassis CSS uses a powerful combination of Sass and CSS variables to create a flexible form system that adapts to themes and design requirements.

The Form input component can be customized at both runtime (via custom properties) and compile time (via Sass variables).

Custom properties

The Form input component exposes CSS custom properties to control its appearance at runtime.

Color properties control the visual appearance of form inputs:

--fg-color: var(--input-fg-color, var(--form-idle-fg-active));
--bg-color: var(--input-bg-color, var(--form-idle-bg-regular));
--border-color: var(--input-border-color, var(--form-idle-border-color));
--icon-color: var(--input-icon-color, var(--form-idle-fg-active));

Sizing and spacing properties ensure consistent dimensions and proportions for form inputs:

@include map-font($form-md-text-font, input);
--padding-x: var(--input-padding-x, #{$form-md-padding-x});
--padding-y: var(--input-padding-y, #{$form-md-padding-y});
--gap: var(--input-gap, #{$form-md-gap});
--min-height: var(--input-min-height, #{$form-input-min-height});
--border-width: var(--input-border-width, #{$form-regular-border-width});
--border-radius: var(--input-border-radius, #{$form-md-border-radius});
--caret-size: var(--input-caret-size, #{$form-md-caret-size});
--icon-size: var(--input-icon-size, #{$form-md-icon-size});

Button color properties for file inputs:

--file-button-fg-color: #{$form-file-button-fg-color};
--file-button-bg-image: #{$form-file-button-bg-image};
--file-button-bg-color: #{$form-file-button-bg-color};
--file-button-bg-hover: #{$form-file-button-bg-hover};

Check the overview page to see the CSS variables shared by all form elements.

Sass variables

The Form input component uses Sass variables in scss/config/_defaults.scss to define its defaults.

These variables control common properties for all form inputs:

$form-input-plaintext-color:            var(--fg-main);
$form-input-min-height:                 calc(var(--line-height) + var(--padding-y) * 2);
$form-input-box-shadow:                 none; // var(--box-shadow-inset);
$form-input-focus-ring-color:           $focus-ring-color;
$form-input-focus-ring-offset:          0px;
$form-input-transition:                 border-color .15s ease-in-out, box-shadow .15s ease-in-out;

These variables customize the appearance of file inputs:

$form-file-button-fg-color:             $input-addon-fg-color;
$form-file-button-bg-image:             $input-addon-bg-image;
$form-file-button-bg-color:             $input-addon-bg-color;
$form-file-button-bg-hover:             var(--default-bg-even);

Check the overview page to see the Sass variables shared by all form elements.

Design tokens

Check the overview page to see the design tokens shared by all form elements.