Skip to main content
Texas Design System

Form Inputs & Filters

Form inputs, selection controls, and filter patterns for collecting and refining user data.
WCAG 2.2 AA Reviewed April 2026 Accessibility notes

Text Input

Purpose:

Each input is made with states that are listed to the right of the element.

Limitations:

Required

Field label

Content Guidance:

Field label
  • Sentence case
  • No punctuation
  • Noun or question
Description text
  • Sentence case
  • No punctuation
  • Provide guidance on what to enter
Inactive (Unfilled)
Active (Filled)
Inactive (Filled)
Error (Filled)
Helpful error message
Success (Filled)
View HTML 
<div class="txds-input-state-row">
<span class="txds-state-label">Inactive (Unfilled)</span>
<div class="txds-form-group">
<label class="txds-label" for="ti-default">Label</label>
<input class="txds-input txds-input--inactive" id="ti-default" type="text" placeholder="">
</div>
</div>
<div class="txds-input-state-row">
<span class="txds-state-label">Active (Filled)</span>
<div class="txds-form-group">
<label class="txds-label" for="ti-active">Label</label>
<input class="txds-input" id="ti-active" type="text" value="Input text">
</div>
</div>
<div class="txds-input-state-row">
<span class="txds-state-label">Inactive (Filled)</span>
<div class="txds-form-group">
<label class="txds-label" for="ti-inactive">Label</label>
<input class="txds-input txds-input--inactive" id="ti-inactive" type="text" value="Input text">
</div>
</div>
<div class="txds-input-state-row">
<span class="txds-state-label">Error (Filled)</span>
<div class="txds-form-group">
<label class="txds-label" for="ti-error">Label</label>
<span class="txds-error-message" id="ti-error-msg">Helpful error message</span>
<input class="txds-input txds-input--error" id="ti-error" type="text" value="Input text" aria-invalid="true" aria-describedby="ti-error-msg">
</div>
</div>
<div class="txds-input-state-row">
<span class="txds-state-label">Success (Filled)</span>
<div class="txds-form-group">
<label class="txds-label" for="ti-success">Label</label>
<input class="txds-input txds-input--success" id="ti-success" type="text" value="Input text">
</div>
</div>

Select / Input with Icon

Purpose:

Select is for lists of 5–7 items only. Each dropdown is made with states that are listed to the right of the element. This component can also be used for any other input with an icon (calendar, search, etc.).

Limitations:

Required

Field label

Content Guidance:

Field label
  • Sentence case
  • No punctuation
  • Noun or question
Description text
  • Sentence case
  • No punctuation
  • Provide guidance on what to enter
Inactive (Unfilled)
Active (Filled)
Inactive (Filled)
Error (Filled)
Helpful error message
Success (Filled)
View HTML 
<div class="txds-input-state-row">
<span class="txds-state-label">Inactive (Unfilled)</span>
<div class="txds-form-group">
<label class="txds-label" for="sel-default">Label</label>
<select class="txds-select txds-input--inactive" id="sel-default">
<option value="" selected></option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="txds-input-state-row">
<span class="txds-state-label">Active (Filled)</span>
<div class="txds-form-group">
<label class="txds-label" for="sel-active">Label</label>
<select class="txds-select" id="sel-active">
<option value="">- Select -</option>
<option selected>Selected option</option>
<option>Option 2</option>
</select>
</div>
</div>
<div class="txds-input-state-row">
<span class="txds-state-label">Inactive (Filled)</span>
<div class="txds-form-group">
<label class="txds-label" for="sel-inactive">Label</label>
<select class="txds-select txds-input--inactive" id="sel-inactive">
<option value="">- Select -</option>
<option selected>Selected option</option>
<option>Option 2</option>
</select>
</div>
</div>
<div class="txds-input-state-row">
<span class="txds-state-label">Error (Filled)</span>
<div class="txds-form-group">
<label class="txds-label" for="sel-error">Label</label>
<span class="txds-error-message" id="sel-error-msg">Helpful error message</span>
<select class="txds-select txds-select--error" id="sel-error" aria-invalid="true" aria-describedby="sel-error-msg">
<option selected>Selected option</option>
</select>
</div>
</div>
<div class="txds-input-state-row">
<span class="txds-state-label">Success (Filled)</span>
<div class="txds-form-group">
<label class="txds-label" for="sel-success">Label</label>
<select class="txds-select txds-select--success" id="sel-success">
<option selected>Selected option</option>
</select>
</div>
</div>

Combo Box

Purpose:

Combo Box is for lists of 7+ items only. Each dropdown is made with states that are listed to the right of the element.

Limitations:

Required

Field label

Content Guidance:

Field label
  • Sentence case
  • No punctuation
  • Noun or question
Description text
  • Sentence case
  • No punctuation
  • Provide guidance on what to enter
Inactive (Unfilled)
Active (Filled)
Inactive (Filled)
Error (Filled)
Helpful error message
Success (Filled)
View HTML 
<div class="txds-input-state-row">
<span class="txds-state-label">Inactive (Unfilled)</span>
<div class="txds-form-group">
<label class="txds-label" for="cb-default">Label</label>
<div class="txds-combo-box">
<input class="txds-input txds-input--inactive" id="cb-default" type="text" placeholder="" role="combobox" aria-expanded="false" aria-autocomplete="list" list="cb-options" autocomplete="off">
</div>
</div>
</div>
<div class="txds-input-state-row">
<span class="txds-state-label">Active (Filled)</span>
<div class="txds-form-group">
<label class="txds-label" for="cb-active">Label</label>
<div class="txds-combo-box">
<input class="txds-input" id="cb-active" type="text" value="Option 2" role="combobox" aria-expanded="false" aria-autocomplete="list" list="cb-options" autocomplete="off">
</div>
</div>
</div>
<div class="txds-input-state-row">
<span class="txds-state-label">Inactive (Filled)</span>
<div class="txds-form-group">
<label class="txds-label" for="cb-inactive">Label</label>
<div class="txds-combo-box">
<input class="txds-input txds-input--inactive" id="cb-inactive" type="text" value="Input text" role="combobox" aria-expanded="false" list="cb-options" autocomplete="off">
</div>
</div>
</div>
<div class="txds-input-state-row">
<span class="txds-state-label">Error (Filled)</span>
<div class="txds-form-group">
<label class="txds-label" for="cb-error">Label</label>
<span class="txds-error-message">Helpful error message</span>
<div class="txds-combo-box">
<input class="txds-input txds-input--error" id="cb-error" type="text" value="Input text" role="combobox" aria-expanded="false" aria-invalid="true" list="cb-options" autocomplete="off">
</div>
</div>
</div>
<div class="txds-input-state-row">
<span class="txds-state-label">Success (Filled)</span>
<div class="txds-form-group">
<label class="txds-label" for="cb-success">Label</label>
<div class="txds-combo-box">
<input class="txds-input txds-input--success" id="cb-success" type="text" value="Input text" role="combobox" aria-expanded="false" list="cb-options" autocomplete="off">
</div>
</div>
</div>
<datalist id="cb-options">
<option value="Option 1"></option>
<option value="Option 2"></option>
<option value="Option 3"></option>
</datalist>

Checkboxes & Radios

Purpose:

For single check confirmations or multi-selections, use checkboxes. For single selections, use radio buttons.

Content Guidance:

Field label
  • Sentence case
  • No punctuation
Checkboxes
Radio buttons
View HTML 
<div class="txds-check-radio-grid">
  <fieldset class="txds-form-group">
    <legend class="txds-label">Checkboxes</legend>
    <div class="txds-checkbox-group">
      <label class="txds-checkbox">
        <input type="checkbox" name="chk-demo-1" value="checked" checked>
        Checked
      </label>
      <label class="txds-checkbox">
        <input type="checkbox" name="chk-demo-2" value="unchecked">
        Unchecked
      </label>
      <label class="txds-checkbox">
        <input type="checkbox" name="chk-demo-3" value="checked-focus" checked>
        Checked (focus)
      </label>
      <label class="txds-checkbox">
        <input type="checkbox" name="chk-demo-4" value="unchecked-focus">
        Unchecked (focus)
      </label>
    </div>
  </fieldset>
  <fieldset class="txds-form-group">
    <legend class="txds-label">Radio buttons</legend>
    <div class="txds-radio-group">
      <label class="txds-radio">
        <input type="radio" name="radio-demo" value="selected" checked>
        <span>Selected</span>
      </label>
      <label class="txds-radio">
        <input type="radio" name="radio-demo2" value="selected-hover" checked>
        <span>Selected (hover)</span>
      </label>
      <label class="txds-radio">
        <input type="radio" name="radio-demo3" value="unselected">
        <span>Unselected</span>
      </label>
      <label class="txds-radio">
        <input type="radio" name="radio-demo4" value="unselected-hover">
        <span>Unselected (hover)</span>
      </label>
      <label class="txds-radio">
        <input type="radio" name="radio-demo5" value="disabled" disabled>
        <span>Disabled</span>
      </label>
    </div>
  </fieldset>
</div>

Filters

Filters are made from many individual sub-components to make them as flexible as possible.

Filter by (dropdowns)

View HTML 
<div class="txds-filter-dropdowns">
  <div class="txds-form-group">
    <label class="txds-label" for="filt-by1">Filter by</label>
    <select class="txds-select" id="filt-by1">
      <option value="">- Select -</option>
      <option>Category A</option>
      <option>Category B</option>
    </select>
  </div>
  <div class="txds-form-group">
    <label class="txds-label" for="filt-by2">Filter by</label>
    <select class="txds-select" id="filt-by2">
      <option value="">- Select -</option>
      <option>Region 1</option>
      <option>Region 2</option>
    </select>
  </div>
</div>

Filter panels (Boxed & Unfilled)

Filters

Location

Select your county:

Sort by

Services

Filters

Location

Select your county:

Sort by

Services

View HTML 
<div class="txds-filters-row">
  <div class="txds-filter-panel txds-filter-panel--boxed">
    <div class="txds-filter-panel__header">
      <h3 class="txds-filter-panel__header-title">Filters</h3>
      <button type="button" class="txds-filter-panel__toggle" aria-expanded="true" aria-label="Collapse filters">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 15 12 9 18 15"/></svg>
      </button>
    </div>
    <div class="txds-filter-panel__section">
      <h4 class="txds-filter-panel__section-title">Location</h4>
      <p class="txds-filter-panel__section-label" id="filter-location-label">Select your county:</p>
      <select class="txds-select" aria-labelledby="filter-location-label">
        <option value="">- Select -</option>
        <option>Travis</option>
        <option>Harris</option>
        <option>Dallas</option>
      </select>
    </div>
    <div class="txds-filter-panel__section">
      <h4 class="txds-filter-panel__section-title">Sort by</h4>
      <div class="txds-radio-group">
        <label class="txds-radio">
          <input type="radio" name="sort-boxed" value="relevant" checked>
          <span>Most relevant</span>
        </label>
        <label class="txds-radio">
          <input type="radio" name="sort-boxed" value="recent">
          <span>Most recent</span>
        </label>
      </div>
    </div>
    <div class="txds-filter-panel__section">
      <h4 class="txds-filter-panel__section-title">Services</h4>
      <div class="txds-checkbox-group">
        <label class="txds-checkbox">
          <input type="checkbox" name="svc-boxed-1" value="safety" checked>
          Public Safety
        </label>
        <label class="txds-checkbox">
          <input type="checkbox" name="svc-boxed-2" value="legal">
          Legal
        </label>
        <label class="txds-checkbox">
          <input type="checkbox" name="svc-boxed-3" value="licenses">
          Licenses
        </label>
        <label class="txds-checkbox">
          <input type="checkbox" name="svc-boxed-4" value="human">
          Human Services
        </label>
        <label class="txds-checkbox">
          <input type="checkbox" name="svc-boxed-5" value="permits">
          Permits
        </label>
      </div>
    </div>
    <button type="button" class="txds-filter-panel__action">Find my office</button>
  </div>
  <div class="txds-filter-panel txds-filter-panel--unfilled">
    <div class="txds-filter-panel__header">
      <h3 class="txds-filter-panel__header-title">Filters</h3>
      <button type="button" class="txds-filter-panel__toggle" aria-expanded="true" aria-label="Collapse filters">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="6 15 12 9 18 15"/></svg>
      </button>
    </div>
    <div class="txds-filter-panel__section">
      <h4 class="txds-filter-panel__section-title">Location</h4>
      <p class="txds-filter-panel__section-label" id="filter-location-label-2">Select your county:</p>
      <select class="txds-select" aria-labelledby="filter-location-label-2">
        <option value="">- Select -</option>
        <option>Travis</option>
        <option>Harris</option>
        <option>Dallas</option>
      </select>
    </div>
    <div class="txds-filter-panel__section">
      <h4 class="txds-filter-panel__section-title">Sort by</h4>
      <div class="txds-radio-group">
        <label class="txds-radio">
          <input type="radio" name="sort-unfilled" value="relevant" checked>
          <span>Most relevant</span>
        </label>
        <label class="txds-radio">
          <input type="radio" name="sort-unfilled" value="recent">
          <span>Most recent</span>
        </label>
      </div>
    </div>
    <div class="txds-filter-panel__section">
      <h4 class="txds-filter-panel__section-title">Services</h4>
      <div class="txds-checkbox-group">
        <label class="txds-checkbox">
          <input type="checkbox" name="svc-unfilled-1" value="safety" checked>
          Public Safety
        </label>
        <label class="txds-checkbox">
          <input type="checkbox" name="svc-unfilled-2" value="legal">
          Legal
        </label>
        <label class="txds-checkbox">
          <input type="checkbox" name="svc-unfilled-3" value="licenses">
          Licenses
        </label>
        <label class="txds-checkbox">
          <input type="checkbox" name="svc-unfilled-4" value="human">
          Human Services
        </label>
        <label class="txds-checkbox">
          <input type="checkbox" name="svc-unfilled-5" value="permits">
          Permits
        </label>
      </div>
    </div>
    <button type="button" class="txds-filter-panel__action">Find my office</button>
  </div>
</div>

Search Filters — Alphabetical & Checkboxes

Public Safety

FILTER BY:
View HTML 
<div style="padding: 24px 0;">
  <h3 style="font-size: 32px; font-weight: 700; color: var(--txds-color-gray-70); margin-bottom: 24px;">Public Safety</h3>
  <div class="txds-filter-bar">
    <span class="txds-filter-bar__label">FILTER BY:</span>
    <div class="txds-filter-bar__alpha">
      <button type="button" class="txds-filter-bar__alpha-btn txds-filter-bar__alpha-btn--active" aria-pressed="true">A-D</button>
      <button type="button" class="txds-filter-bar__alpha-btn" aria-pressed="false">E-J</button>
      <button type="button" class="txds-filter-bar__alpha-btn" aria-pressed="false">K-O</button>
      <button type="button" class="txds-filter-bar__alpha-btn" aria-pressed="false">P-S</button>
      <button type="button" class="txds-filter-bar__alpha-btn" aria-pressed="false">T-W</button>
      <button type="button" class="txds-filter-bar__alpha-btn" aria-pressed="false">X-Z</button>
    </div>
    <button class="txds-filter-bar__clear" type="button">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: middle; margin-right: 4px;"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      Clear All Filters
    </button>
  </div>
  <div class="txds-checkbox-row">
    <label class="txds-checkbox">
      <input type="checkbox" name="topic-1" value="emergency" checked>
      Emergency Management
    </label>
    <label class="txds-checkbox">
      <input type="checkbox" name="topic-2" value="law">
      Law Enforcement Services
    </label>
    <label class="txds-checkbox">
      <input type="checkbox" name="topic-3" value="crime">
      Crime Reporting
    </label>
    <label class="txds-checkbox">
      <input type="checkbox" name="topic-4" value="health">
      Public Health
    </label>
    <label class="txds-checkbox">
      <input type="checkbox" name="topic-5" value="prevention">
      Prevention
    </label>
  </div>
  <button class="txds-show-more" type="button">+ Show 5 More Filters</button>
</div>

Number Counter

Purpose:

Number counters add extra functionality of adding or subtracting from a number field with buttons.

Counter

At Maximum

View HTML 
<div style="display: flex; gap: 24px; flex-wrap: wrap; align-items: center;">
  <div>
    <span class="txds-label" style="margin-bottom: 8px;">Counter</span>
    <div class="txds-counter">
      <button type="button" class="txds-counter__btn" aria-label="Decrease" data-counter-action="decrement">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </button>
      <input type="number" class="txds-counter__value" value="0" min="0" max="5" aria-label="Quantity">
      <button type="button" class="txds-counter__btn" aria-label="Increase" data-counter-action="increment">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </button>
    </div>
    <p class="txds-counter__message" aria-live="polite"></p>
  </div>
  <div>
    <span class="txds-label" style="margin-bottom: 8px;">At Maximum</span>
    <div class="txds-counter">
      <button type="button" class="txds-counter__btn" aria-label="Decrease" data-counter-action="decrement">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </button>
      <input type="number" class="txds-counter__value" value="5" min="0" max="5" aria-label="Quantity">
      <button type="button" class="txds-counter__btn" aria-label="Increase" data-counter-action="increment">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
      </button>
    </div>
    <p class="txds-counter__message" aria-live="polite"></p>
  </div>
</div>

CSS Classes

Class Description
txds-input Text input field.
txds-input--error Text input with error border.
txds-input--success Text input with success border.
txds-input--inactive Inactive/disabled-look filled input.
txds-select Dropdown select element.
txds-combo-box Combo box wrapper (input + dropdown toggle).
txds-checkbox Checkbox label wrapper.
txds-radio Radio button label wrapper.
txds-filter-panel Sidebar filter panel container.
txds-filter-panel--boxed Boxed variant with dark header.
txds-filter-panel--unfilled Minimal unfilled variant.
txds-filter-bar__alpha-btn Alphabetical range filter button.
txds-counter Number counter stepper.