Input

Text input field for user data entry. Heights align to grid rows.

Default

Base

Class	Description
`.ui-input`	Base class

Size

Class	Value
`.ui-input--sm`	sm
`.ui-input--lg`	lg

Variant

Class	Value
`.ui-input--filled`	filled
`.ui-input--ghost`	ghost

State

Class	Value
`.ui-input--error`	error
`.ui-input--success`	success

Auto-size

Class	Description
`.ui-input--auto-size`	auto-size

Block

Class	Description
`.ui-input--block`	block

Override these CSS custom properties to customize the component.

Token	Default	Description
`--ui-input-height`	`var(--ui-row-2)`	Overall height
`--ui-input-padding-x`	`var(--ui-space-1)`	Horizontal padding
`--ui-input-font-size`	`var(--ui-font-size-sm)`	Font size
`--ui-input-radius`	`var(--ui-radius-md)`	Corner radius
`--ui-input-bg`	`var(--ui-color-bg)`	Background color
`--ui-input-border-color`	`var(--ui-color-border-strong)`	Border color
`--ui-input-border-color-focus`	`var(--ui-color-primary)`	Border color focus
`--ui-input-color`	`var(--ui-color-text)`	Text color
`--ui-input-placeholder`	`var(--ui-color-text-muted)`	Placeholder
`--ui-input-height-sm`	`calc(var(--ui-row) * 1.5)`	Overall height at small size
`--ui-input-font-size-sm`	`var(--ui-font-size-xs)`	Font size at small size
`--ui-input-height-lg`	`calc(var(--ui-row) * 2.5)`	Overall height at large size
`--ui-input-padding-x-lg`	`var(--ui-space-2)`	Horizontal padding at large size
`--ui-input-font-size-lg`	`var(--ui-font-size-md)`	Font size at large size
`--ui-input-filled-bg`	`var(--ui-color-bg-muted)`	Filled bg
`--ui-input-error-border`	`var(--ui-color-danger)`	Error border
`--ui-input-success-border`	`var(--ui-color-success)`	Success border

Sizes

<input class="ui-input ui-input--sm" type="text" placeholder="Small (1.5 rows)"></input>
<input class="ui-input" type="text" placeholder="Default (2 rows)"></input>
<input class="ui-input ui-input--lg" type="text" placeholder="Large (2.5 rows)"></input>

Variants

<input class="ui-input" type="text" placeholder="Outline (default)"></input>
<input class="ui-input ui-input--filled" type="text" placeholder="Filled"></input>
<input class="ui-input ui-input--ghost" type="text" placeholder="Ghost"></input>

States

<input class="ui-input" type="text" placeholder="Default"></input>
<input class="ui-input ui-input--error" type="text" value="Invalid input"></input>
<input class="ui-input ui-input--success" type="text" value="Valid input"></input>
<input class="ui-input" type="text" placeholder="Disabled" disabled></input>
<input class="ui-input" type="text" value="Read only" readonly></input>

Full Width

<input class="ui-input ui-input--block" type="text" placeholder="Full width input"></input>

Auto Size

<!-- Auto-sizing textarea grows with content. Requires browser support for field-sizing. -->
<textarea class="ui-input ui-input--auto-size ui-input--block" placeholder="Type here and watch it grow..."></textarea>
<input class="ui-input ui-input--auto-size" type="text" placeholder="Auto-sizing input"></input>

With Prefix Icon

<div class="ui-input-group ui-input-group--has-prefix">
  <span class="ui-input-group__addon ui-input-group__addon--start">
    <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <circle cx="11" cy="11" r="8"></circle>
      <path d="m21 21-4.3-4.3"></path>
    </svg>
  </span>
  <input class="ui-input ui-input--block" type="search" placeholder="Search..."></input>
</div>

With Suffix Icon

<div class="ui-input-group ui-input-group--has-suffix">
  <input class="ui-input ui-input--block" type="email" placeholder="Email address"></input>
  <span class="ui-input-group__addon ui-input-group__addon--end">
    <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <rect width="20" height="16" x="2" y="4" rx="2"></rect>
      <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path>
    </svg>
  </span>
</div>

With Both Addons

<div class="ui-input-group ui-input-group--has-prefix ui-input-group--has-suffix">
  <span class="ui-input-group__addon ui-input-group__addon--start">
    <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
      <circle cx="12" cy="7" r="4"></circle>
    </svg>
  </span>
  <input class="ui-input ui-input--block" type="text" placeholder="Username"></input>
  <span class="ui-input-group__addon ui-input-group__addon--end ui-input-group__addon--interactive">
    <svg class="ui-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <path d="M18 6 6 18"></path>
      <path d="m6 6 12 12"></path>
    </svg>
  </span>
</div>