TextInput

Filled

Outlined

Underlined

With value

---
import { TextInput } from 'bws-astro-ui';
---

<TextInput name="name" label="Name" />
<TextInput name="name" label="Name" variant="outlined" />
<TextInput name="name" label="Name" variant="underlined" />

The label rests inside the field and floats up on focus or once there’s a value — in pure CSS, without JavaScript. With a placeholder, the label stays floated above it.

Hint, error and states

Email

We'll never share it

Email

Enter a valid email address

City

Disabled

<TextInput label="Email" type="email" hint="We'll never share it" />
<TextInput label="Email" value="jan@" error="Enter a valid email address" />
<TextInput label="City" placeholder="e.g. Warszawa" color="secondary" />
<TextInput label="Disabled" value="Read only" disabled />

color sets the focus color. An error — e.g. from server-side validation — marks the field invalid (aria-invalid) until the value is edited, when it’s inside a Form. For rules checked while typing, see Form validation.

Content inside the field

The prepend-inner and append-inner slots put icons or buttons inside the field, before or after the text:

Search

Price

zł

<TextInput label="Search" variant="outlined">
  <Icon
    slot="prepend-inner"
    icon={Search}
    size="sm"
    class="ml-3 self-center text-on-surface/60"
  />
</TextInput>
<TextInput label="Price">
  <span slot="append-inner" class="self-center pr-4 text-on-surface/60">
    zł
  </span>
</TextInput>

API

Prop	Type	Default
label	string	—
variant	filled · outlined · underlined	filled
color	focus color	primary
hint	string — helper text under the field	—
error	string — starts out invalid	—
rules	validation rules	—
type	native input type	text
id, class	string — class goes to the wrapper	—

Any other attribute (name, value, placeholder, required, autocomplete, disabled…) goes to the <input>. Without an id, a unique one is generated to link the label and message.

Slot	Content
prepend-inner	inside the field, before the text
append-inner	inside the field, after the text