Skip to main content

Fieldset

Used to group several controls as well as labels within a form.

Anatomy

  1. Fieldset
  2. Legend (optional)
  3. Input field

Import

import { Fieldset, Legend } from '@pluralsight/react'

Usage

function BasicExample() {
  return (
    <FormControlProvider readOnly={true}>
      <Fieldset name="course">
        <Legend>Choose your favorite course:</Legend>
        <Radio value="solid">SolidJS</Radio>
        <Radio value="react">React</Radio>
        <Radio value="vue">Vue</Radio>
      </Fieldset>
    </FormControlProvider>
  )
}

Disabled Groups

To easily disable and entire group, pass the disabled prop to the FormControlProvider component.

function BasicExample() {
  return (
    <FormControlProvider disabled={true} readOnly={true}>
      <Fieldset name="course">
        <Legend>Choose your favorite course:</Legend>
        <Radio value="solid">SolidJS</Radio>
        <Radio value="react">React</Radio>
        <Radio value="vue">Vue</Radio>
      </Fieldset>
    </FormControlProvider>
  )
}

Customizing

There are 3 ways to customize the Fieldset components.

1. Unused Classes

Each component layer of the Fieldset has a unused class name that can be utilized in your local CSS to customize the Fieldset at any level.

  1. pando-fieldset: The element of the Fieldset.
  2. pando-fieldset-legend: The element of the Legend.

2. Passing a className prop

You can pass a className prop to the Fieldset component to customize the Fieldset. This is useful if your project uses CSS Modules or a CSS-in-JS library like Emotion.

import customStyles from './customStyles.module.css'

function CustomFieldset(props) {
  return <Fieldset {...props} className={customStyles.custom} />
}

function CustomLegend(props) {
  return <Legend {...props} className={customStyles.customLegend} />
}

3. Ejected Fieldset

For a low-level "ejected" approach, you can use the Headless-styles API to customize the Fieldset however you prefer while keeping the accessibility behavior.

import { getFieldsetProps, getLegendProps } from '@pluralsight/headless-styles'

To learn more about the Headless-styles API, check out the Headless-styles documentation.

Behavior

Usage

Do use the fieldset when you need to make a meaningful group of input fields.

Don't use the fieldset for every item in a form.

Do use the fieldset to group related inputs like Radio, Checkbox, or mixed group fields (i.e. multiple Inputs).

API

Fieldset: FC<FieldsetProps>

type FieldsetProps = FieldsetHTMLAttributes<HTMLFieldsetElement>

Parameters

  1. Any props that can be passed to a fieldset element.

Legend: FC<LegendProps>

type LegendProps = HTMLAttributes<HTMLLegendElement>

Parameters

Accessibility

The Pando Fieldset and Legend APIs combined with semantic HTML allow the components to be fully accessible and screen-readable by default.