Field

Empty
Input

Field

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

Include CSS

Import Tailwind and one full Basecoat style bundle.

@import "tailwindcss";
@import "basecoat-css/vega.css";

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

@import "tailwindcss";
@import "basecoat-css/base.css";
@import "basecoat-css/components/field.css";
@import "basecoat-css/styles/vega.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

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

Set your maximum budget (up to $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

Subscription Plan

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.

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.

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.

Tasks

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

Responsive layout

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

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 and aria-invalid="true" to the invalid control.

RTL

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

الملف الشخصي

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

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