Components

Text field

LabelDescription¢EURHeaderSupporting text

<TextField>
Container element.
slot="label"
The label for the field.
slot="description"
Description text displayed above the field.
.ui-field
The boxed input area.
slot="header"
Content above the input, inside the border, with a divider.
slot="prefix"
Content at the inline-start of the field, inside the border.
<input>
The input element.
slot="suffix"
Content at the inline-end of the field, inside the border.
slot="footer"
Content below the input, inside the border, with a divider.
slot="end-text"
Supporting text displayed below the field.

Variants

OutlinedFilled

Astro

---
import { TextField } from "@opui/astro"
---

<TextField label="Outlined" placeholder="Placeholder" />
<TextField label="Filled" placeholder="Placeholder" filled />

Output

<label class="ui-text-field"
  ><span class="ui-label">Outlined</span
  ><span class="ui-field"
    ><input placeholder="Placeholder" type="text" /></span></label
><label class="ui-text-field ui-filled"
  ><span class="ui-label">Filled</span
  ><span class="ui-field"><input placeholder="Placeholder" type="text" /></span
></label>

Sizes

Small outlinedSmall filled

Astro

---
import { TextField } from "@opui/astro"
---

<TextField label="Small outlined" placeholder="Placeholder" small />
<TextField label="Small filled" placeholder="Placeholder" small filled />

Output

<label class="ui-text-field ui-small"
  ><span class="ui-label">Small outlined</span
  ><span class="ui-field"
    ><input placeholder="Placeholder" type="text" /></span></label
><label class="ui-text-field ui-filled ui-small"
  ><span class="ui-label">Small filled</span
  ><span class="ui-field"><input placeholder="Placeholder" type="text" /></span
></label>

End text

LabelSupporting text

Astro

---
import { TextField } from "@opui/astro"
---

<TextField label="Label" placeholder="Outlined" endText="Supporting text" />

Output

<label class="ui-text-field"
  ><span class="ui-label">Label</span
  ><span class="ui-field"><input placeholder="Outlined" type="text" /></span
  ><span class="ui-end-text">Supporting text</span></label
>

Affix

Use the prefix, suffix, header, and footer slots to affix content inside the field's border. Prefix and suffix sit beside the input, while header and footer span the field's full width with a divider.

Amount¢EURWebsitehttps://WeightkgSearch

Astro

---
import { TextField } from "@opui/astro"
---

<TextField label="Amount" placeholder="0.00">
  <Fragment slot="prefix">¢</Fragment>
  <Fragment slot="suffix">EUR</Fragment>
</TextField>

<TextField label="Website" placeholder="example.com">
  <Fragment slot="prefix">https://</Fragment>
</TextField>

<TextField label="Weight" type="numeric" placeholder="0">
  <Fragment slot="suffix">kg</Fragment>
</TextField>

<TextField label="Search" placeholder="Search...">
  <svg
    slot="prefix"
    width="16"
    height="16"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <circle cx="11" cy="11" r="8"></circle>
    <path d="m21 21-4.3-4.3"></path>
  </svg>
</TextField>

Output

<label class="ui-text-field"
  ><span class="ui-label">Amount</span
  ><span class="ui-field"
    ><input placeholder="0.00" type="text" /><span class="ui-prefix">¢</span
    ><span class="ui-suffix">EUR</span></span
  ></label
><label class="ui-text-field"
  ><span class="ui-label">Website</span
  ><span class="ui-field"
    ><input placeholder="example.com" type="text" /><span class="ui-prefix"
      >https://</span
    ></span
  ></label
><label class="ui-text-field"
  ><span class="ui-label">Weight</span
  ><span class="ui-field"
    ><input
      inputmode="numeric"
      pattern="[0-9]*"
      placeholder="0"
      type="text"
    /><span class="ui-suffix">kg</span></span
  ></label
><label class="ui-text-field"
  ><span class="ui-label">Search</span
  ><span class="ui-field"
    ><input placeholder="Search..." type="text" /><span class="ui-prefix"
      ><svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <circle cx="11" cy="11" r="8"></circle>
        <path d="m21 21-4.3-4.3"></path></svg></span></span
></label>

Headers and footers

Use the header slot for inside-field captions (filenames, categories) and the footer slot for counters, hints, or action buttons.

UsernameFull NameTagline

Astro

---
import { TextField } from "@opui/astro"
---

<TextField label="Username" placeholder="Enter your name">
  <Fragment slot="header">Full Name</Fragment>
</TextField>

<TextField label="Tagline" placeholder="A short description">
  <Fragment slot="footer">0 / 80</Fragment>
</TextField>

Output

<label class="ui-text-field"
  ><span class="ui-label">Username</span
  ><span class="ui-field"
    ><input placeholder="Enter your name" type="text" /><span class="ui-header"
      >Full Name</span
    ></span
  ></label
><label class="ui-text-field"
  ><span class="ui-label">Tagline</span
  ><span class="ui-field"
    ><input placeholder="A short description" type="text" /><span
      class="ui-footer"
      >0 / 80</span
    ></span
  ></label
>

Validation

Set required on the component to toggle required styles on the input.

Use the error prop to toggle invalid styles. It rendersdata-invalid on the root element. Make use of the end text to give extra feedback on the error.

I'm requiredSo am I!

LabelOnly double-negatives are allowed.LabelOnly letters from the first half of the alphabet are allowed.

Astro

---
import { TextField } from "@opui/astro"
---

<div class="example-row">
  <TextField label="I'm required" placeholder="Placeholder" required />
  <TextField label="So am I!" placeholder="Placeholder" required filled />
</div>

<div class="example-row">
  <TextField
    label="Label"
    placeholder="Placeholder"
    value="This isn't right"
    endText="Only double-negatives are allowed."
    error
  />
  <TextField
    label="Label"
    placeholder="Placeholder"
    value="Uh-oh"
    endText="Only letters from the first half of the alphabet are allowed."
    error
    filled
  />
</div>

Output

<div class="example-row">
  <label class="ui-text-field"
    ><span class="ui-label">I'm required</span
    ><span class="ui-field"
      ><input placeholder="Placeholder" required type="text" /></span></label
  ><label class="ui-text-field ui-filled"
    ><span class="ui-label">So am I!</span
    ><span class="ui-field"
      ><input placeholder="Placeholder" required type="text" /></span
  ></label>
</div>
<div class="example-row">
  <label class="ui-text-field" data-invalid
    ><span class="ui-label">Label</span
    ><span class="ui-field"
      ><input
        placeholder="Placeholder"
        type="text"
        value="This isn't right" /></span
    ><span class="ui-end-text">Only double-negatives are allowed.</span></label
  ><label class="ui-text-field ui-filled" data-invalid
    ><span class="ui-label">Label</span
    ><span class="ui-field"
      ><input placeholder="Placeholder" type="text" value="Uh-oh" /></span
    ><span class="ui-end-text"
      >Only letters from the first half of the alphabet are allowed.</span
    ></label
  >
</div>

Spread

Use the spread boolean prop to display the label and description on the left with the input on the right. The layout collapses to a column on narrow containers.

NameProvide your full name for identificationEmailWe'll use this to contact youPlease use a valid email addressRequiredYou must fill this inDisabledThis field is disabledInvalid NameThis field has an errorThis value is too short.AmountDaily spending limit¢EURWebsiteYour public profile URLhttps://Must include a valid domainProject nameUsed to generate the project URLacme.dev/API keyStored encrypted at restSecretTreat like a password

Astro

---
import { TextField } from "@opui/astro"
---

<TextField spread placeholder="Evil Rabbit">
  <Fragment slot="label">Name</Fragment>
  <Fragment slot="description"
    >Provide your full name for identification</Fragment
  >
</TextField>

<TextField spread placeholder="you@example.com" type="email" filled>
  <Fragment slot="label">Email</Fragment>
  <Fragment slot="description">We'll use this to contact you</Fragment>
  <Fragment slot="end-text">Please use a valid email address</Fragment>
</TextField>

<TextField spread required label="Required">
  <Fragment slot="description">You must fill this in</Fragment>
</TextField>

<TextField spread disabled label="Disabled">
  <Fragment slot="description">This field is disabled</Fragment>
</TextField>

<TextField spread error label="Invalid Name">
  <Fragment slot="description">This field has an error</Fragment>
  <Fragment slot="end-text">This value is too short.</Fragment>
</TextField>

<TextField spread label="Amount" placeholder="0.00">
  <Fragment slot="description">Daily spending limit</Fragment>
  <Fragment slot="prefix">¢</Fragment>
  <Fragment slot="suffix">EUR</Fragment>
</TextField>

<TextField spread label="Website" placeholder="example.com" filled>
  <Fragment slot="description">Your public profile URL</Fragment>
  <Fragment slot="prefix">https://</Fragment>
  <Fragment slot="end-text">Must include a valid domain</Fragment>
</TextField>

<TextField spread label="Project name" placeholder="my-project">
  <Fragment slot="description">Used to generate the project URL</Fragment>
  <Fragment slot="header">acme.dev/</Fragment>
  <Fragment slot="footer">Lowercase letters and dashes only</Fragment>
</TextField>

<TextField
  spread
  filled
  label="API key"
  placeholder="Paste your key"
  type="password"
>
  <Fragment slot="description">Stored encrypted at rest</Fragment>
  <Fragment slot="prefix">
    <svg
      width="16"
      height="16"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
      <path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
    </svg>
  </Fragment>
  <Fragment slot="header">Secret</Fragment>
  <Fragment slot="footer">Rotates every 90 days</Fragment>
  <Fragment slot="end-text">Treat like a password</Fragment>
</TextField>

Output

<label class="ui-text-field ui-spread"
  ><span class="ui-label">Name</span
  ><span class="ui-start-text">Provide your full name for identification</span
  ><span class="ui-field"
    ><input placeholder="Evil Rabbit" type="text" /></span></label
><label class="ui-text-field ui-filled ui-spread"
  ><span class="ui-label">Email</span
  ><span class="ui-start-text">We'll use this to contact you</span
  ><span class="ui-field"
    ><input placeholder="you@example.com" type="email" /></span
  ><span class="ui-end-text">Please use a valid email address</span></label
><label class="ui-text-field ui-spread"
  ><span class="ui-label">Required</span
  ><span class="ui-start-text">You must fill this in</span
  ><span class="ui-field"><input required type="text" /></span></label
><label class="ui-text-field ui-spread"
  ><span class="ui-label">Disabled</span
  ><span class="ui-start-text">This field is disabled</span
  ><span class="ui-field"><input disabled type="text" /></span></label
><label class="ui-text-field ui-spread" data-invalid
  ><span class="ui-label">Invalid Name</span
  ><span class="ui-start-text">This field has an error</span
  ><span class="ui-field"><input type="text" /></span
  ><span class="ui-end-text">This value is too short.</span></label
><label class="ui-text-field ui-spread"
  ><span class="ui-label">Amount</span
  ><span class="ui-start-text">Daily spending limit</span
  ><span class="ui-field"
    ><input placeholder="0.00" type="text" /><span class="ui-prefix">¢</span
    ><span class="ui-suffix">EUR</span></span
  ></label
><label class="ui-text-field ui-filled ui-spread"
  ><span class="ui-label">Website</span
  ><span class="ui-start-text">Your public profile URL</span
  ><span class="ui-field"
    ><input placeholder="example.com" type="text" /><span class="ui-prefix"
      >https://</span
    ></span
  ><span class="ui-end-text">Must include a valid domain</span></label
><label class="ui-text-field ui-spread"
  ><span class="ui-label">Project name</span
  ><span class="ui-start-text">Used to generate the project URL</span
  ><span class="ui-field"
    ><input placeholder="my-project" type="text" /><span class="ui-header"
      >acme.dev/</span
    ><span class="ui-footer">Lowercase letters and dashes only</span></span
  ></label
><label class="ui-text-field ui-filled ui-spread"
  ><span class="ui-label">API key</span
  ><span class="ui-start-text">Stored encrypted at rest</span
  ><span class="ui-field"
    ><input placeholder="Paste your key" type="password" /><span
      class="ui-prefix"
      ><svg
        width="16"
        height="16"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <rect width="18" height="11" x="3" y="11" rx="2" ry="2"></rect>
        <path d="M7 11V7a5 5 0 0 1 10 0v4"></path></svg></span
    ><span class="ui-header">Secret</span
    ><span class="ui-footer">Rotates every 90 days</span></span
  ><span class="ui-end-text">Treat like a password</span></label
>

Auto-fit

When enabled the Field changes size depending on its content.

Label

Astro

---
import { TextField } from "@opui/astro"
---

<TextField label="Label" placeholder="Auto-fit" autoFit />

Output

<label class="ui-text-field ui-auto-fit"
  ><span class="ui-label">Label</span
  ><span class="ui-field"><input placeholder="Auto-fit" type="text" /></span
></label>

Input types

FilledSmall

ColorEmailPasswordSearchPhoneTextURL

DateDatetime localMonthTimeWeek

Astro

<div class="example-column">
  <label class="ui-text-field input-type-field">
    <span class="ui-label">Color</span>
    <span class="ui-field">
      <input type="color" placeholder="Color" />
    </span>
  </label>
  <label class="ui-text-field input-type-field">
    <span class="ui-label">Email</span>
    <span class="ui-field">
      <input type="email" placeholder="name@email.com" />
    </span>
  </label>
  <label class="ui-text-field input-type-field">
    <span class="ui-label">Password</span>
    <span class="ui-field">
      <input type="password" placeholder="Password" />
    </span>
  </label>
  <label class="ui-text-field input-type-field">
    <span class="ui-label">Search</span>
    <span class="ui-field">
      <input type="search" placeholder="Search" />
    </span>
  </label>
  <label class="ui-text-field input-type-field">
    <span class="ui-label">Phone</span>
    <span class="ui-field">
      <input type="tel" placeholder="(666) 666-1337" />
    </span>
  </label>
  <label class="ui-text-field input-type-field">
    <span class="ui-label">Text</span>
    <span class="ui-field">
      <input type="text" placeholder="Text" />
    </span>
  </label>
  <label class="ui-text-field input-type-field">
    <span class="ui-label">URL</span>
    <span class="ui-field">
      <input type="url" placeholder="https://yoursite.com" />
    </span>
  </label>
</div>

<div class="example-column">
  <label class="ui-text-field input-type-field">
    <span class="ui-label">Date</span>
    <span class="ui-field">
      <input type="date" placeholder="Date" />
    </span>
  </label>
  <label class="ui-text-field input-type-field">
    <span class="ui-label">Datetime local</span>
    <span class="ui-field">
      <input type="datetime-local" placeholder="Datetime local" />
    </span>
  </label>
  <label class="ui-text-field input-type-field">
    <span class="ui-label">Month</span>
    <span class="ui-field">
      <input type="month" placeholder="Month" />
    </span>
  </label>
  <label class="ui-text-field input-type-field">
    <span class="ui-label">Time</span>
    <span class="ui-field">
      <input type="time" placeholder="Time" />
    </span>
  </label>
  <label class="ui-text-field input-type-field">
    <span class="ui-label">Week</span>
    <span class="ui-field">
      <input type="week" placeholder="Week" />
    </span>
  </label>
</div>

Output

<div class="example-column">
  <label class="ui-text-field input-type-field"
    ><span class="ui-label">Color</span
    ><span class="ui-field"
      ><input type="color" placeholder="Color" /></span></label
  ><label class="ui-text-field input-type-field"
    ><span class="ui-label">Email</span
    ><span class="ui-field"
      ><input type="email" placeholder="name@email.com" /></span></label
  ><label class="ui-text-field input-type-field"
    ><span class="ui-label">Password</span
    ><span class="ui-field"
      ><input type="password" placeholder="Password" /></span></label
  ><label class="ui-text-field input-type-field"
    ><span class="ui-label">Search</span
    ><span class="ui-field"
      ><input type="search" placeholder="Search" /></span></label
  ><label class="ui-text-field input-type-field"
    ><span class="ui-label">Phone</span
    ><span class="ui-field"
      ><input type="tel" placeholder="(666) 666-1337" /></span></label
  ><label class="ui-text-field input-type-field"
    ><span class="ui-label">Text</span
    ><span class="ui-field"
      ><input type="text" placeholder="Text" /></span></label
  ><label class="ui-text-field input-type-field"
    ><span class="ui-label">URL</span
    ><span class="ui-field"
      ><input type="url" placeholder="https://yoursite.com" /></span
  ></label>
</div>
<div class="example-column">
  <label class="ui-text-field input-type-field"
    ><span class="ui-label">Date</span
    ><span class="ui-field"
      ><input type="date" placeholder="Date" /></span></label
  ><label class="ui-text-field input-type-field"
    ><span class="ui-label">Datetime local</span
    ><span class="ui-field"
      ><input
        type="datetime-local"
        placeholder="Datetime local" /></span></label
  ><label class="ui-text-field input-type-field"
    ><span class="ui-label">Month</span
    ><span class="ui-field"
      ><input type="month" placeholder="Month" /></span></label
  ><label class="ui-text-field input-type-field"
    ><span class="ui-label">Time</span
    ><span class="ui-field"
      ><input type="time" placeholder="Time" /></span></label
  ><label class="ui-text-field input-type-field"
    ><span class="ui-label">Week</span
    ><span class="ui-field"><input type="week" placeholder="Week" /></span
  ></label>
</div>

Date inputs

Date-related inputs never show as empty, so the label is always visible. There are only hacks with compromises and no neat ways of dealing with that issue. You're free to implement a solution of your own here that works with your project.

Numeric vs `<input type="number">`

Numeric

Astro

---
import { TextField } from "@opui/astro"
---

<TextField label="Numeric" placeholder="Numeric" type="numeric" />

Output

<label class="ui-text-field"
  ><span class="ui-label">Numeric</span
  ><span class="ui-field"
    ><input
      inputmode="numeric"
      pattern="[0-9]*"
      placeholder="Numeric"
      type="text" /></span
></label>

You most likely don't need `<input type="number">`

While <input type="number"> may seem logical for numeric data it should only be used when mathematical operations are needed on the input (which is... never). Data like credit card numbers, IDs or social security numbers - are actually text that happen to be numeric rather than mathematical values. Therefore, consider using<input type="text" inputmode="numeric" pattern="[0-9]*"> instead.

You will have a bad time.

This triggers the numeric keyboard on mobile devices while avoiding the jank of number inputs, such as:

Unexpected value increments from scroll wheels
Browser-specific validation differences
Accessibility problems
Removal of leading zeros
Allows for some non-numeric mathematical characters

It should probably be called <input type="math"> instead.

The British Government has a great article about how bad input number is and goes in-depth. It's a very interesting read.

File

Use aria-label instead of the <label> element.

File is a weird one. Should it really be an <input> element? Well, it's what we've got :sweat_smile:

LabelLabel

Astro

---
import { TextField } from "@opui/astro"
---

<TextField type="file" placeholder="File" label="Label" />
<TextField type="file" placeholder="File" label="Label" filled />

Output

<label class="ui-text-field"
  ><span class="ui-label">Label</span
  ><span class="ui-field"><input placeholder="File" type="file" /></span></label
><label class="ui-text-field ui-filled"
  ><span class="ui-label">Label</span
  ><span class="ui-field"><input placeholder="File" type="file" /></span
></label>

Autosuggest

Leverages the <input> + <datalist> element combo.

<input list="DATALISTID">
<datalist id="DATALISTID">

Users Emails

Astro

---
import { TextField } from "@opui/astro"
---

<TextField label="Users" list="users" placeholder="Placeholder">
  <datalist id="users">
    <option value="Ray Manzarek"></option>
    <option value="Jonny Greenwood"></option>
    <option value="Marika Hackman"></option>
  </datalist>
</TextField>

<TextField
  filled
  label="Emails"
  list="users-email"
  placeholder="Placeholder"
  type="email"
>
  <datalist id="users-email">
    <option value="ray.manzarek@the.doors"></option>
    <option value="jonny.greenwood@radio.head"></option>
    <option value="marika@hack.man"></option>
  </datalist>
</TextField>

Output

<label class="ui-text-field"
  ><span class="ui-label">Users</span
  ><span class="ui-field"
    ><input list="users" placeholder="Placeholder" type="text" /></span
  ><datalist id="users">
    <option value="Ray Manzarek"></option>
    <option value="Jonny Greenwood"></option>
    <option value="Marika Hackman"></option></datalist></label
><label class="ui-text-field ui-filled"
  ><span class="ui-label">Emails</span
  ><span class="ui-field"
    ><input list="users-email" placeholder="Placeholder" type="email" /></span
  ><datalist id="users-email">
    <option value="ray.manzarek@the.doors"></option>
    <option value="jonny.greenwood@radio.head"></option>
    <option value="marika@hack.man"></option></datalist
></label>

Think of <datalist> as a list of suggested values.

<select> only allows you to choose between its provided values.
<input> lets you input anything you want.
<input> + <datalist> is a hybrid between the two.

Do I have to use `<label>`?

No. But you get some accessibility wins for free with <label>. It's recommended to label your inputs somehow.

Astro

<div class="ui-text-field">
  <span class="ui-field">
    <input type="text" placeholder="Placeholder" />
  </span>
</div>

Output

<div class="ui-text-field">
  <span class="ui-field"><input type="text" placeholder="Placeholder" /></span>
</div>

Accessibility

Don't use <input type="number"> unless your user research tells you to.

API

Text field API

Prop	Type	Default	Description
`autoFit`	`boolean`	`false`	Changes size depending on its content.
`description`	`string`	-	Description text displayed above the field.
`endText`	`string`	-	Supporting text displayed below the field.
`error`	`boolean`	`false`	Shows error styles.
`filled`	`boolean`	`false`	The variant to use.
`id`	`string`	-	The id of the `<input>`.
`label`	`string`	-	The label for the field.
`small`	`boolean`	`false`	The size of the element.
`spread`	`boolean`	`false`	Pushes the label and description to one side and the input to the other.
`startText`	`string`	-	Legacy alias of `description`.
`type`	`"numeric"`, `string`	`"text"`	The input type. `"numeric"` renders a text input with a numeric keyboard.

Slots

Slot	Description
`default`	Extra content inside the root, such as a `<datalist>`.
`description`	Description text displayed above the field.
`end-text`	Supporting text displayed below the field.
`footer`	Content below the input, inside the border, with a divider.
`header`	Content above the input, inside the border, with a divider.
`label`	The label for the field.
`prefix`	Content at the inline-start of the field, inside the border.
`suffix`	Content at the inline-end of the field, inside the border.
`supporting-text`	Legacy alias of the `end-text` slot.

Input attributes (disabled, list, max, min, name, placeholder, required, step, value) go to the <input>. Other attributes go to the root <label>.

Text input API

Type	Modifiers	Default	Description
Wrapper	`.ui-field`	-	The `<input>` must be wrapped in a `<span class="ui-field">` element. Border, background, and focus styling are inherited from `.ui-field`, not the input itself.
Auto-fit	`.ui-auto-fit`	-	When enabled, the element changes size depending on its content.
Sizes	`.ui-small`	-	The size of the element.
Variants	default, `.ui-filled`	-	The variant to use.

Browser support

See also the full browser support guide.

Installation

text-field.css

@layer components.extended {
  /*
- Common styling for input, textarea and select
- Form related styles such as: label, supporting text, error handling
*/
  :where(.ui-text-field, .ui-textarea, .ui-select) {
    --_motion: var(--motion, 1);
    --_accent-color: var(--primary);
    --_bg-color: var(--surface-default);
    --_border-color: var(--field-border-color);
    --_field-padding-block: var(--size-2);
    --_field-padding-inline: var(--size-2);
    --_filled-border-color: var(--text-primary);
    --_height: var(--field-size);
    --_label-color: var(--text-muted);
    --_end-text-color: var(--text-muted);

    display: grid;
    gap: var(--size-1) 0;
    position: relative;

    /* Field - the actual input with a border around it */
    .ui-field {
      background-color: var(--_bg-color);
      border: var(--field-border-width) solid var(--_border-color);
      border-radius: var(--field-border-radius);
      display: grid;
      grid-column: 1/-1;
      grid-row: 2;
      grid-template-areas:
        "header header header"
        "prefix input  suffix"
        "footer footer footer";
      grid-template-columns: auto 1fr auto;
      min-block-size: var(--_height);

      transition: border-color calc(0.2s * var(--_motion))
        cubic-bezier(0.4, 0, 0.2, 1);
    }

    :where(.ui-field) :where(input, textarea, select) {
      background: transparent;
      border: 0;
      color: var(--text-primary);
      font-family: var(--font-sans);
      font-size: var(--font-size-1);
      grid-area: input;
      inline-size: 100%;
      line-height: var(--font-lineheight-1);
      min-inline-size: 0;
      padding: var(--_field-padding-block) var(--_field-padding-inline);

      &:focus,
      &:focus-visible {
        outline: 0;
      }
    }

    /* Affixes */
    .ui-prefix,
    .ui-suffix {
      align-items: center;
      color: var(--_label-color);
      display: inline-flex;
      padding-inline: var(--_field-padding-inline);
      white-space: nowrap;
    }

    .ui-prefix {
      grid-area: prefix;
    }

    .ui-suffix {
      grid-area: suffix;
    }

    .ui-header,
    .ui-footer {
      align-items: center;
      color: var(--_label-color);
      display: flex;
      font-size: var(--font-size-0);
      gap: var(--size-2);
      padding: var(--size-1) var(--_field-padding-inline);
    }

    .ui-header {
      border-block-end: 1px solid var(--_border-color);
      grid-area: header;
    }

    .ui-footer {
      border-block-start: 1px solid var(--_border-color);
      grid-area: footer;
    }

    /* Remove padding on the input when affixes are next to it */
    .ui-field:has(> .ui-prefix) :where(input, textarea, select) {
      padding-inline-start: 0;
    }

    .ui-field:has(> .ui-suffix) :where(input, textarea, select) {
      padding-inline-end: 0;
    }

    /* Textarea - keep affix aligned with the first line */
    &.ui-textarea .ui-field {
      .ui-prefix,
      .ui-suffix {
        align-self: start;
        padding-block: var(--_field-padding-block);
      }
    }

    /* Required/Invalid */
    &:has(:invalid) {
      .ui-label:after {
        color: var(--red);
        content: "*";
        margin: -0.25em auto auto 0.25em;
      }
    }

    /* File */
    &:has(input[type="file"]) {
      cursor: pointer;

      input {
        align-self: flex-start;
        block-size: var(--_height);
        box-shadow: none;
        color: var(--text-primary);
        cursor: inherit;
        max-inline-size: 100%;
        padding: 0;
        transition: font-size 0.2s var(--ease-3);

        &::-webkit-file-upload-button,
        &::file-selector-button {
          background-color: var(--surface-tonal);
          block-size: calc(100% - var(--size-2) * 2);
          border: none;
          border-radius: var(--field-border-radius);
          cursor: pointer;
          margin-block-start: var(--size-2);
          margin-inline-end: 1ex;
          margin-inline-start: var(--size-2);
        }
      }

      /* Variants */
      &.ui-filled {
        input {
          &::-webkit-file-upload-button,
          &::file-selector-button {
            background-color: var(--surface-default);
            block-size: calc(100% - var(--size-2) * 2);
            border-radius: var(--field-border-radius);
            cursor: pointer;
            margin-block-start: var(--size-2);
          }
        }
      }

      /* Sizes */
      &.ui-small {
        input {
          font-size: var(--font-size-05);

          &::-webkit-file-upload-button,
          &::file-selector-button {
            block-size: calc(100% - var(--size-2));
            margin-block-start: var(--size-1);
          }
        }
      }
    }

    /* Autosuggest */
    &:has(input[list]) {
      .ui-label {
        /* Make sure chevron is visible */
        inline-size: calc(100% - var(--size-6));
      }
    }

    /* Select */
    &:has(select) {
      .ui-label {
        /* Make sure chevron is visible */
        inline-size: calc(100% - var(--size-6));
      }
    }

    /* Customizable Select */
    &:has(select button) {
      select {
        padding: 0;

        button {
          outline: 0;
          padding: var(--_field-padding-block) var(--size-8)
            var(--_field-padding-block) var(--_field-padding-inline);
        }
      }
    }

    /* Non-customizable Select */
    &:has(select):not(:has(button)) {
      select {
        padding: var(--_field-padding-block) var(--size-8)
          var(--_field-padding-block) var(--_field-padding-inline);
      }
    }

    /* Input - color */
    &:has(input[type="color"]) {
      .ui-field {
        block-size: var(--_height);
        inline-size: var(--_height);
        min-block-size: 0;
        overflow: hidden;
      }

      input {
        appearance: none;
        background: none;
        block-size: var(--_height);
        inline-size: var(--_height);
        overflow: hidden;
        padding: 0;

        &::-webkit-color-swatch {
          border: none;
        }

        &::-webkit-color-swatch-wrapper {
          padding: 0;
        }
      }
    }

    /* Element states */
    &:hover {
      &:not([data-invalid]) {
        .ui-field {
          border-color: var(--text-primary);
        }
      }
    }

    &:focus-within {
      .ui-field {
        border-color: var(--_accent-color);
        outline-offset: -2px;
      }
    }

    /* Label */
    .ui-label {
      color: var(--text-primary);
      font-size: var(--font-size-05);
      font-weight: 600;
      grid-column: 1/-1;
      grid-row: 1;
      padding-inline: 0 1ex;
    }

    :where(.ui-start-text) {
      color: var(--_end-text-color);
      font-size: var(--font-size-0);
      grid-column: 1/-1;
      grid-row: 2;
      line-height: 1.5;
    }

    &:not(.ui-spread):has(> .ui-start-text) {
      .ui-field {
        grid-row: 3;
      }

      :where(.ui-end-text) {
        grid-row: 4;
      }
    }

    /* End text */
    :where(.ui-end-text) {
      color: var(--_end-text-color);
      font-size: var(--font-size-0);
      grid-column: 1/-1;
      grid-row: 3;
      line-height: 1.5;
    }

    /* Auto-fit */
    &.ui-auto-fit {
      inline-size: auto;

      .ui-field {
        inline-size: auto;
      }

      :where(& input, & textarea) {
        field-sizing: content;
        inline-size: auto;
        min-inline-size: 25ch;
      }
    }

    /* Validation */
    &[data-invalid],
    &:has(:user-invalid) {
      --_accent-color: var(--color-9);
      --_border-color: var(--color-9);
      --_filled-border-color: var(--color-9);
      --_label-color: var(--color-9);
      --_end-text-color: var(--color-9);
    }

    /*
  * Variant: Filled
  */
    &.ui-filled {
      --_bg-color: var(--surface-tonal);

      &:not(:has([disabled], :has(input[type="color"]))) {
        /* Hover */
        &:hover {
          --_bg-color: light-dark(
            oklch(from var(--surface-tonal) calc(l * 0.93) c h),
            oklch(from var(--surface-tonal) calc(l * 1.1) c h)
          );
        }
      }
    }

    /* Disabled */
    &:where(:has([disabled])) {
      cursor: not-allowed;
      opacity: 0.64;
      user-select: none;

      &::before {
        display: none;
      }

      .ui-field {
        cursor: not-allowed;
      }

      :where(input, textarea, select) {
        cursor: not-allowed;

        * {
          pointer-events: none;
        }
      }

      .ui-label,
      .ui-start-text,
      .ui-end-text {
        cursor: not-allowed;
      }
    }

    /* Read-only */
    &:where(:has([readonly])) {
      &::before {
        display: none;
      }

      :where(input, textarea, select) {
        cursor: not-allowed;

        * {
          pointer-events: none;
        }
      }
    }

    /* Sizes */
    &.ui-small {
      --_field-padding-block: var(--size-2);
      --_height: var(--field-size-small);

      &:has(input[type="color"]) {
        .ui-label {
          line-height: 1.5;
        }
      }
    }

    /* Orientation */
    &.ui-spread {
      align-items: start;
      column-gap: var(--size-4);
      container-type: inline-size;
      grid-template-columns: 1fr auto;

      .ui-label {
        font-weight: 600;
        grid-column: 1;
        grid-row: 1;
      }

      .ui-start-text {
        color: var(--_end-text-color);
        font-size: var(--font-size-0);
        grid-column: 1;
        grid-row: 2;
        line-height: 1.5;
      }

      .ui-field {
        align-self: start;
        grid-column: 2;
        grid-row: 1 / span 2;
      }

      .ui-field:has(textarea) {
        grid-row: 1 / span 3;

        + .ui-end-text {
          grid-row: 4;
        }
      }

      :where(textarea) {
        min-inline-size: 30ch;
      }

      :where(.ui-end-text) {
        grid-column: 2;
        text-align: end;
      }

      /* Collapse to column on narrow containers */
      @container (width < 400px) {
        column-gap: 0;
        grid-template-columns: 1fr;

        .ui-label {
          grid-column: 1;
          grid-row: 1;
        }

        .ui-start-text {
          grid-column: 1;
          grid-row: 2;
        }

        .ui-field,
        .ui-field:has(textarea) {
          grid-column: 1;
          grid-row: 3;
        }

        :where(.ui-end-text) {
          grid-column: 1;
          grid-row: 4;
          text-align: start;
        }
      }
    }
  }
}

text-input.css

@layer components.extended {
  :where(
    .ui-text-field:has(
      :where(
        input[type="date"],
        input[type="datetime-local"],
        input[type="email"],
        input[type="month"],
        input[type="number"],
        input[type="password"],
        input[type="search"],
        input[type="tel"],
        input[type="text"],
        input[type="time"],
        input[type="url"],
        input[type="week"]
      )
    )
  ) {
    /* Sizes */
    &.ui-small {
      input {
        padding-inline: var(--size-2);
      }
    }
  }

  /* Autosuggest */
  :where(.ui-text-field:has(input[list])) {
    .ui-field {
      position: relative;
    }

    /* Hide native arrow */
    input[list]::-webkit-calendar-picker-indicator {
      cursor: pointer;
      opacity: 0;
      pointer-events: none;
      position: absolute;
    }

    input[list] {
      padding-inline-end: var(--size-8);
    }

    .ui-field::after {
      block-size: 0;
      border-block-start: 5px solid;
      border-inline: 5px solid transparent;
      content: "";
      inline-size: 0;
      inset: 50% var(--size-3) auto auto;
      pointer-events: none;
      position: absolute;
      translate: 0 -50%;
    }

    &.ui-small {
      input[list] {
        padding-inline-end: var(--size-7);
      }

      .ui-field::after {
        inset-inline-end: var(--size-2);
      }
    }
  }
}

Text field

Anatomy

Variants

Sizes

End text

Affix

Headers and footers

Validation

Spread

Auto-fit

Input types

Date inputs

Numeric vs <input type="number">

You most likely don't need <input type="number">

File

Autosuggest

Do I have to use <label>?

Accessibility

API

Text field API

Slots

Text input API

Browser support

Installation

Numeric vs `<input type="number">`

You most likely don't need `<input type="number">`

Do I have to use `<label>`?