Field

Usage

Include CSS

Import Tailwind and one full A3S UI style bundle.

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

Or import only the base CSS, Field component CSS, and one style pack.

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/field.css";
@import "@a3s-lab/ui/styles/a3s.css";

Using CDN or bundler imports? See the Installation page.

Add your field HTML

Use class="field" for one control and class="fieldset" for related controls. Use a native <fieldset> when the group needs a <legend>; otherwise use a labelled role="group".

<fieldset class="fieldset">
  <legend>Profile</legend>
  <p>This appears on invoices and emails.</p>
  <div role="group" aria-label="Profile fields">
    <div role="group" class="field">
      <label for="name">Full name</label>
      <input id="name" autocomplete="off" placeholder="Evil Rabbit" />
      <p>This appears on invoices and emails.</p>
    </div>
    <div role="group" class="field" data-invalid>
      <label for="username">Username</label>
      <input id="username" autocomplete="off" aria-invalid="true" aria-describedby="username-error" />
      <p id="username-error" role="alert">Choose another username.</p>
    </div>
    <div role="group" class="field" data-orientation="horizontal">
      <input id="newsletter" type="checkbox" role="switch" />
      <label for="newsletter">Subscribe to the newsletter</label>
    </div>
  </div>
</fieldset>

HTML structure

<fieldset class="fieldset">: Native group for related fields. Use <legend> for the label and a following <p> for description.
<div role="group" class="fieldset">: Structural group when <fieldset> is not appropriate. Add aria-label or aria-labelledby.
<div role="group" class="field">: Single field wrapper. Add data-orientation when needed.
<label>: Label for the control. Use for when the control has an id.
<input>, <select>, <textarea>: Native form control. Put aria-invalid="true" on the invalid control, not only on the wrapper.
<section>: Optional content wrapper for label and description when the control sits beside text.
<p>: Helper text or error text. Use role="alert" for validation errors and connect it with aria-describedby.

Examples

Input

Username

Choose a unique username for your account.

Password

Must be at least 8 characters long.

Textarea

Feedback

Share your thoughts about our service.

Select

Department

Select your department or area of work.

Slider

Price Range

Set your maximum budget (up to $800).

Fieldset

Address Information

We need your address to deliver your order.

Street Address

City

Postal Code

Checkbox

Show these items on the desktop

Select the items you want to show on the desktop.

Hard disks

External disks

CDs, DVDs, and iPods

Connected servers

Sync Desktop & Documents folders

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.

Monthly ($9.99/month)

Yearly ($99.99/year)

Lifetime ($299.99)

Switch

Multi-factor authentication

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

Choice card

Wrap a .field inside a <label> to create selectable field cards. This works with radio, checkbox, and switch controls.

Compute Environment

Select the compute environment for your cluster.

Kubernetes

Run GPU workloads on a K8s cluster.

Virtual Machine

Access a cluster to run GPU workloads.

Field group

Stack fields inside a group and use .field-separator to divide sections.

Responses

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

Push notifications

Tasks

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

Push notifications

Email notifications

Responsive layout

Use data-orientation="responsive" to stack by default and switch to horizontal in wider containers.

Validation and errors

Add data-invalid to .field and aria-invalid="true" to the invalid control.

Enter a valid email address.

RTL

Add dir="rtl" to the field, fieldset, or an ancestor.

الملف الشخصي

تظهر هذه المعلومات في حسابك.

الاسم الكامل

اكتب اسمك الأول والأخير.

#Field

#Usage

Include CSS

Add your field HTML

#HTML structure

#Examples

#Input

#Textarea

#Select

#Slider

#Fieldset

#Checkbox

#Radio

#Switch

#Choice card