Forms

Usage guidance for form control styles, layout, help text, and disabled states across Chassis form components.

Overview

Chassis form controls expand on Rebooted native form styles with classes, opting into consistent rendering across browsers and devices.

Set an appropriate type attribute on every input (e.g., email for an email address, number for numerical information) to take advantage of the browser's native input controls, like email verification and number selection.

A form combining a labeled email input, a password input, and a checkbox demonstrates the base building blocks. A <TextInput> renders its own <FormLabel> and <FormHelp> from label and help, already associated with the input, and a <Checkbox> its own label.

import { Button, Checkbox, Form, TextInput } from '@chassis-ui/react'

export const Example = () => {
  return (
    <Form>
      <div className="mb-md">
        <TextInput
          type="email"
          label="Email address"
          help="We'll never share your email with anyone else."
        />
      </div>
      <div className="mb-md">
        <TextInput autoComplete="current-password" type="password" label="Password" />
      </div>
      <Checkbox
        className="mb-md"
        label="Check me out"
        onChange={(isSelected) => {
          console.log(isSelected)
        }}
      />
      <Button type="submit" color="primary">
        Submit
      </Button>
    </Form>
  )
}

Form text

<FormHelp> renders block-level or inline-level help text alongside a form control. Point the control's aria-describedby at the same id as the <FormHelp> so assistive technology — screen readers in particular — announces the help text when the control receives focus.

A <TextInput> beside a <FormLabel> written by hand takes the label's id as aria-labelledby, as well as the id the label's htmlFor names: see Manual id wiring.

A block-level <FormHelp> gets a top margin for spacing from the input above it.

import { Form, FormHelp, FormLabel, TextInput } from '@chassis-ui/react'

export const Example = () => {
  return (
    <Form>
      <div className="mb-md">
        <FormLabel htmlFor="inputPassword5" id="inputPassword5Label">
          Password
        </FormLabel>
        <TextInput
          autoComplete="new-password"
          type="password"
          id="inputPassword5"
          aria-describedby="passwordHelpBlock"
          aria-labelledby="inputPassword5Label"
        />
        <FormHelp id="passwordHelpBlock">
          Your password must be 8-20 characters long, contain letters and numbers, and must not
          contain spaces, special characters, or emoji.
        </FormHelp>
      </div>
    </Form>
  )
}

An inline <FormHelp> renders as any typical inline element (component="span", or similar) with just the .form-help class applied.

Password

Must be 8-20 characters long.

import { Flex, FormHelp, FormLabel, TextInput } from '@chassis-ui/react'

export const Example = () => {
  return (
    <Flex wrap="wrap" gap="md" align="center">
      <div>
        <FormLabel htmlFor="inputPassword6" id="inputPassword6Label" className="col-form-label">
          Password
        </FormLabel>
      </div>
      <div>
        <TextInput
          autoComplete="new-password"
          type="password"
          id="inputPassword6"
          aria-describedby="passwordHelpInline"
          aria-labelledby="inputPassword6Label"
        />
      </div>
      <div>
        <FormHelp component="span" id="passwordHelpInline">
          Must be 8-20 characters long.
        </FormHelp>
      </div>
    </Flex>
  )
}

Disabled forms

Add the disabled boolean attribute on an input to prevent interaction and render it with a lighter appearance:

<TextInput type="text" placeholder="Disabled input here..." disabled />

Add disabled to a <fieldset> to disable every control within it. Browsers treat native form controls (<input>, <select>, <button>) inside a <fieldset disabled> as disabled, blocking both keyboard and mouse interaction.

A custom button-like element such as <Button> inside a disabled fieldset only receives pointer-events: none styling, so it stays focusable and operable via keyboard. Add tabindex="-1" to remove it from the tab order and aria-disabled="true" to signal its state to assistive technology.

import { Button, Checkbox, Form, Select, TextInput } from '@chassis-ui/react'

export const Example = () => {
  return (
    <Form>
      <fieldset disabled>
        <legend>Disabled fieldset example</legend>
        <div className="mb-md">
          <TextInput label="Disabled input" placeholder="Disabled input" />
        </div>
        <div className="mb-md">
          <Select label="Disabled select menu">
            <option>Disabled select</option>
          </Select>
        </div>
        <div className="mb-md">
          <Checkbox id="disabledFieldsetCheck" label="Can't check this" disabled />
        </div>
        <Button type="submit">Submit</Button>
      </fieldset>
    </Form>
  )
}