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

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.

Textarea

Share your thoughts about our service.

Select

Select your department or area of work.

Slider

Price Range

Set your budget range ($200 - 800).

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

Subscription Plan

Yearly and lifetime plans offer significant savings.

Switch

Choice Card

Compute Environment

Select the compute environment for your cluster.

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

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