UILab
Components

Field

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

Payment Method

All transactions are secure and encrypted

Enter your 16-digit card number

Billing Address

The billing address associated with your payment method

"use client"

import {
  Button,
  Checkbox,

Usage

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldTitle,
} from "uilab-core"
<FieldSet>
  <FieldLegend>Profile</FieldLegend>
  <FieldDescription>This appears on invoices and emails.</FieldDescription>
  <FieldGroup>
    <Field>
      <FieldLabel htmlFor="name">Full name</FieldLabel>
      <Input id="name" autoComplete="off" placeholder="Evil Rabbit" />
      <FieldDescription>This appears on invoices and emails.</FieldDescription>
    </Field>
    <Field>
      <FieldLabel htmlFor="username">Username</FieldLabel>
      <Input id="username" autoComplete="off" aria-invalid />
      <FieldError>Choose another username.</FieldError>
    </Field>
    <Field orientation="horizontal">
      <Switch id="newsletter" />
      <FieldLabel htmlFor="newsletter">Subscribe to the newsletter</FieldLabel>
    </Field>
  </FieldGroup>
</FieldSet>

Examples

Input

Choose a unique username for your account.

Must be at least 8 characters long.

"use client"

import {
  Field,
  FieldDescription,

Textarea

Share your thoughts about our service.

"use client"

import {
  Field,
  FieldDescription,

Select

Select your department or area of work.

"use client"

import {
  Field,
  FieldDescription,

Slider

Price Range

Set your budget range ($200 - 800).

"use client"

import * as React from "react"
import {
  Field,

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.

import {
  Checkbox,
  Field,
  FieldContent,
  FieldDescription,

Radio

Subscription Plan

Yearly and lifetime plans offer significant savings.

"use client"

import {
  Field,
  FieldDescription,

Switch

"use client"

import { Field, FieldLabel, Switch } from "uilab-core"

export function FieldSwitchExample() {

Choice Card

Compute Environment

Select the compute environment for your cluster.

"use client"

import {
  Field,
  FieldContent,

Field Group

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

"use client"

import {
  Checkbox,
  Field,

Empty

Use the Empty component to display an empty state.

Hover Card

Displays a badge or a component that looks like a badge.

On this page

UsageExamplesInputTextareaSelectSliderCheckboxRadioSwitchChoice CardField Group