Form Inputs

Overview

Chassis CSS form elements feature a clean, modern design with consistent states, sizing options, and accessibility enhancements. They adapt to color modes using CSS variables for seamless theming.

<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" rows="3"></textarea>

Sizing

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

<input class="form-input large" type="text" placeholder="Large input">
<input class="form-input" type="text" placeholder="Default input">
<input class="form-input small" 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-medium">
  <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-medium" 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-07-13T12:14">
<input class="form-input" type="date" value="2026-07-13">
<input class="form-input" type="time" value="12:14">

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 large">
  <input class="ghost-input" type="search" placeholder="Search items">
</div>
<div class="form-input small">
  <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-medium-text-font, input);
--padding-x: var(--input-padding-x, #{$form-medium-padding-x});
--padding-y: var(--input-padding-y, #{$form-medium-padding-y});
--gap: var(--input-gap, #{$form-medium-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-medium-border-radius});
--caret-size: var(--input-caret-size, #{$form-medium-caret-size});
--icon-size: var(--input-icon-size, #{$form-medium-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.