UI Thing

Field

Combine labels, controls, and help text to compose accessible form fields and grouped inputs.

Source code

Click to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.

Installation

Usage

<template>
  <UiFieldSet>
    <UiFieldLegend>Profile</UiFieldLegend>
    <UiFieldDescription>This appears on invoices and emails.</UiFieldDescription>
    <UiFieldGroup>
      <UiField>
        <UiFieldLabel for="name">Full name</UiFieldLabel>
        <UiInput id="name" autoComplete="off" placeholder="Tinker Bell" />
        <UiFieldDescription>This appears on invoices and emails.</UiFieldDescription>
      </UiField>
      <UiField>
        <UiFieldLabel for="username">Username</UiFieldLabel>
        <UiInput id="username" autoComplete="off" aria-invalid />
        <UiFieldError>Choose another username.</UiFieldError>
      </UiField>
      <UiField orientation="horizontal">
        <UiSwitch id="newsletter" />
        <UiFieldLabel for="newsletter">Subscribe to the newsletter</UiFieldLabel>
      </UiField>
    </UiFieldGroup>
  </UiFieldSet>
</template>

Anatomy

The Field family is designed for composing accessible forms. A typical field is structured as follows:

<template>
  <UiField>
    <UiFieldLabel for="input-id">Label</UiFieldLabel>
    <!-- Input, Select, Switch, etc. -->
    <UiFieldDescription>Optional helper text.</UiFieldDescription>
    <UiFieldError>Validation message.</UiFieldError>
  </UiField>
</template>
  • Field is the core wrapper for a single field.
  • FieldContent is a flex column that groups label and description. Not required if you have no description.
  • Wrap related fields with FieldGroup, and use FieldSet with FieldLegend for semantic grouping.

Examples

Basic

Payment Method

All transactions are secure and encrypted

Enter your 16-digit card number

Billing Address

The billing address associated with your payment method

Input

Choose a unique username for your account.

Must be at least 8 characters long.

Textarea

Share your thoughts about our service.

Select

Select your department or area of work.

Slider

Price Range

Set your budget range ($ 200 - 800).

FieldSet

Address Information

We need your address to deliver your order.

Checkbox

Show these items on the desktop

Select the items you want to show on the desktop.

Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other devices.

Radio

Yearly and lifetime plans offer significant savings.

Switch

Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code sent to your email.

Notion Prompt

How did you hear about us?

How did you hear about us?

Select the option that best describes how you heard about us.

Choice Card

Wrap Field components inside FieldLabel to create selectable field groups. This works with RadioItem, Checkbox and Switch components.

Select the compute environment for your cluster.

Field Group

Stack Field components with FieldGroup. Add FieldSeparator to divide them.

Get notified when ChatGPT responds to requests that take time, like research or image generation.

Get notified when tasks you've created have updates. Manage tasks

Responsive Layout

  • Vertical fields: Default orientation stacks label, control, and helper text—ideal for mobile-first layouts.
  • Horizontal fields: Set orientation="horizontal" on Field to align the label and control side-by-side. Pair with FieldContent to keep descriptions aligned.
  • Responsive fields: Set orientation="responsive" for automatic column layouts inside container-aware parents. Apply @container/field-group classes on FieldGroup to switch orientations at specific breakpoints.
Profile

Fill in your profile information.

Provide your full name for identification

You can write your message here. Keep it short, preferably under 100 characters.

Validation and Errors

  • Add data-invalid to Field to switch the entire block into an error state.
  • Add aria-invalid on the input itself for assistive technologies.
  • Render FieldError immediately after the control or inside FieldContent to keep error messages aligned with the field.
<template>
  <UiField data-invalid>
    <UiFieldLabel for="email">Email</UiFieldLabel>
    <UiInput id="email" type="email" aria-invalid />
    <UiFieldError>Enter a valid email address.</UiFieldError>
  </UiField>
</template>

Accessibility

  • FieldSet and FieldLegend keep related controls grouped for keyboard and assistive tech users.
  • Field outputs role="group" so nested controls inherit labeling from FieldLabel and FieldLegend when combined.
  • Apply FieldSeparator sparingly to ensure screen readers encounter clear section boundaries.

Fancy Icon

An icon with a nice background color.

Form

Building forms with VeeValidate and Zod.