Components

Text field

Variants

OutlinedFilled

Vue

<script setup lang="ts">
import { TextField } from "opui-css/vue"
</script>

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

Output

<!--[--><label class="ui-text-field"
  ><span class="ui-label"><!--[-->Outlined<!--]--></span
  ><!----><span class="ui-field"
    ><input
      id="s4-0"
      type="text"
      placeholder="Placeholder"
    /><!----><!----><!----><!----></span
  ><!----><!--[--><!--]--></label
><label class="ui-text-field ui-filled"
  ><span class="ui-label"><!--[-->Filled<!--]--></span
  ><!----><span class="ui-field"
    ><input
      id="s4-1"
      type="text"
      placeholder="Placeholder"
    /><!----><!----><!----><!----></span
  ><!----><!--[--><!--]--></label
><!--]-->

Sizes

Small outlinedSmall filled

Vue

<script setup lang="ts">
import { TextField } from "opui-css/vue"
</script>

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

Output

<!--[--><label class="ui-text-field ui-small"
  ><span class="ui-label"><!--[-->Small outlined<!--]--></span
  ><!----><span class="ui-field"
    ><input
      id="s5-0"
      type="text"
      placeholder="Placeholder"
    /><!----><!----><!----><!----></span
  ><!----><!--[--><!--]--></label
><label class="ui-text-field ui-filled ui-small"
  ><span class="ui-label"><!--[-->Small filled<!--]--></span
  ><!----><span class="ui-field"
    ><input
      id="s5-1"
      type="text"
      placeholder="Placeholder"
    /><!----><!----><!----><!----></span
  ><!----><!--[--><!--]--></label
><!--]-->

End text

LabelSupporting text

Vue

<script setup lang="ts">
import { TextField } from "opui-css/vue"
</script>

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

Output

<label class="ui-text-field"
  ><span class="ui-label"><!--[-->Label<!--]--></span
  ><!----><span class="ui-field"
    ><input
      id="s6-0"
      type="text"
      placeholder="Outlined"
    /><!----><!----><!----><!----></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

Vue

<script setup lang="ts">
import { TextField } from "opui-css/vue"
</script>

<template>
  <TextField label="Amount" placeholder="0.00">
    <template #prefix>¢</template>
    <template #suffix>EUR</template>
  </TextField>

  <TextField label="Website" placeholder="example.com">
    <template #prefix>https://</template>
  </TextField>

  <TextField label="Weight" type="numeric" placeholder="0">
    <template #suffix>kg</template>
  </TextField>

  <TextField label="Search" placeholder="Search...">
    <template #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
    ></template>
  </TextField>
</template>

Output

<!--[--><label class="ui-text-field"
  ><span class="ui-label"><!--[-->Amount<!--]--></span
  ><!----><span class="ui-field"
    ><input id="s7-0" type="text" placeholder="0.00" /><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 id="s7-1" type="text" placeholder="example.com" /><span
      class="ui-prefix"
      ><!--[-->https://<!--]--></span
    ><!----><!----><!----></span
  ><!----><!--[--><!--]--></label
><label class="ui-text-field"
  ><span class="ui-label"><!--[-->Weight<!--]--></span
  ><!----><span class="ui-field"
    ><input
      id="s7-2"
      inputmode="numeric"
      pattern="[0-9]*"
      type="text"
      placeholder="0"
    /><!----><span class="ui-suffix"><!--[-->kg<!--]--></span
    ><!----><!----></span
  ><!----><!--[--><!--]--></label
><label class="ui-text-field"
  ><span class="ui-label"><!--[-->Search<!--]--></span
  ><!----><span class="ui-field"
    ><input id="s7-3" type="text" placeholder="Search..." /><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

Vue

<script setup lang="ts">
import { TextField } from "opui-css/vue"
</script>

<template>
  <TextField label="Username" placeholder="Enter your name">
    <template #header>Full Name</template>
  </TextField>

  <TextField label="Tagline" placeholder="A short description">
    <template #footer>0 / 80</template>
  </TextField>
</template>

Output

<!--[--><label class="ui-text-field"
  ><span class="ui-label"><!--[-->Username<!--]--></span
  ><!----><span class="ui-field"
    ><input
      id="s8-0"
      type="text"
      placeholder="Enter your name"
    /><!----><!----><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
      id="s8-1"
      type="text"
      placeholder="A short description"
    /><!----><!----><!----><span class="ui-footer"
      ><!--[-->0 / 80<!--]--></span
    ></span
  ><!----><!--[--><!--]--></label
><!--]-->

Validation

Add the required attribute on the component. It is forwarded to the underlying <input>.

Use the error prop to toggle invalid styles. It renders data-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.

Vue

<script setup lang="ts">
import { TextField } from "opui-css/vue"
</script>

<template>
  <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>
</template>

Output

<!--[-->
<div class="example-row">
  <label class="ui-text-field"
    ><span class="ui-label"><!--[-->I'm required<!--]--></span
    ><!----><span class="ui-field"
      ><input
        id="s9-0"
        type="text"
        placeholder="Placeholder"
        required
      /><!----><!----><!----><!----></span
    ><!----><!--[--><!--]--></label
  ><label class="ui-text-field ui-filled"
    ><span class="ui-label"><!--[-->So am I!<!--]--></span
    ><!----><span class="ui-field"
      ><input
        id="s9-1"
        type="text"
        placeholder="Placeholder"
        required
      /><!----><!----><!----><!----></span
    ><!----><!--[--><!--]--></label
  >
</div>
<div class="example-row">
  <label class="ui-text-field" data-invalid="true"
    ><span class="ui-label"><!--[-->Label<!--]--></span
    ><!----><span class="ui-field"
      ><input
        id="s9-2"
        type="text"
        placeholder="Placeholder"
      /><!----><!----><!----><!----></span
    ><span class="ui-end-text"
      ><!--[-->Only double-negatives are allowed.<!--]--><!--[--><!--]--></span
    ><!--[--><!--]--></label
  ><label class="ui-text-field ui-filled" data-invalid="true"
    ><span class="ui-label"><!--[-->Label<!--]--></span
    ><!----><span class="ui-field"
      ><input
        id="s9-3"
        type="text"
        placeholder="Placeholder"
      /><!----><!----><!----><!----></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

Vue

<script setup lang="ts">
import { TextField } from "opui-css/vue"
</script>

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

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

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

  <TextField spread disabled label="Disabled">
    <template #description>This field is disabled</template>
  </TextField>

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

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

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

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

  <TextField
    spread
    filled
    label="API key"
    placeholder="Paste your key"
    type="password"
  >
    <template #description>Stored encrypted at rest</template>
    <template #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>
    </template>
    <template #header>Secret</template>
    <template #footer>Rotates every 90 days</template>
    <template #end-text>Treat like a password</template>
  </TextField>
</template>

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
      id="s10-0"
      type="text"
      placeholder="Evil Rabbit"
    /><!----><!----><!----><!----></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
      id="s10-1"
      type="email"
      placeholder="you@example.com"
    /><!----><!----><!----><!----></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 id="s10-2" type="text" required /><!----><!----><!----><!----></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 id="s10-3" type="text" disabled /><!----><!----><!----><!----></span
  ><!----><!--[--><!--]--></label
><label class="ui-text-field ui-spread" data-invalid="true"
  ><span class="ui-label"><!--[-->Invalid Name<!--]--></span
  ><span class="ui-start-text"><!--[-->This field has an error<!--]--></span
  ><span class="ui-field"
    ><input id="s10-4" 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 id="s10-5" type="text" placeholder="0.00" /><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 id="s10-6" type="text" placeholder="example.com" /><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
      id="s10-7"
      type="text"
      placeholder="my-project"
    /><!----><!----><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 id="s10-8" type="password" placeholder="Paste your key" /><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

Vue

<script setup lang="ts">
import { TextField } from "opui-css/vue"
</script>

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

Output

<label class="ui-text-field ui-auto-fit"
  ><span class="ui-label"><!--[-->Label<!--]--></span
  ><!----><span class="ui-field"
    ><input
      id="s11-0"
      type="text"
      placeholder="Auto-fit"
    /><!----><!----><!----><!----></span
  ><!----><!--[--><!--]--></label
>

Input types

Filled Small

ColorEmailPasswordSearchPhoneTextURL

DateDatetime localMonthTimeWeek

Vue

<script setup lang="ts"></script>

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

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

Output

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

Vue

<script setup lang="ts">
import { TextField } from "opui-css/vue"
</script>

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

Output

<label class="ui-text-field"
  ><span class="ui-label"><!--[-->Numeric<!--]--></span
  ><!----><span class="ui-field"
    ><input
      id="s0-0"
      inputmode="numeric"
      pattern="[0-9]*"
      type="text"
      placeholder="Numeric"
    /><!----><!----><!----><!----></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

Vue

<script setup lang="ts">
import { TextField } from "opui-css/vue"
</script>

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

Output

<!--[--><label class="ui-text-field"
  ><span class="ui-label"><!--[-->Label<!--]--></span
  ><!----><span class="ui-field"
    ><input
      id="s1-0"
      type="file"
      placeholder="File"
    /><!----><!----><!----><!----></span
  ><!----><!--[--><!--]--></label
><label class="ui-text-field ui-filled"
  ><span class="ui-label"><!--[-->Label<!--]--></span
  ><!----><span class="ui-field"
    ><input
      id="s1-1"
      type="file"
      placeholder="File"
    /><!----><!----><!----><!----></span
  ><!----><!--[--><!--]--></label
><!--]-->

Autosuggest

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

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

Users Emails

Vue

<script setup lang="ts">
import { TextField } from "opui-css/vue"
</script>

<template>
  <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>
</template>

Output

<!--[--><label class="ui-text-field"
  ><span class="ui-label"><!--[-->Users<!--]--></span
  ><!----><span class="ui-field"
    ><input
      id="s2-0"
      type="text"
      list="users"
      placeholder="Placeholder"
    /><!----><!----><!----><!----></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
      id="s2-1"
      type="email"
      list="users-email"
      placeholder="Placeholder"
    /><!----><!----><!----><!----></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.

Vue

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

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.

Anatomy

label.ui-text-field: Container element
.ui-label: Field label element
.ui-field: The boxed input area
.ui-header: Optional inside-border header strip (with divider)
.ui-prefix: Optional inline-start affix
<input>: Input element
.ui-suffix: Optional inline-end affix
.ui-footer: Optional inside-border footer strip (with divider)
.ui-end-text: Supporting text element

Label Header ¢ EUR Supporting text

API

Text field API

Text input API

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-columns: auto 1fr auto;
      grid-template-areas:
        "header header header"
        "prefix input  suffix"
        "footer footer footer";
      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;
    }

    /* 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

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

Anatomy

API

Text field API

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>`?