Fieldset

The Fieldset component is designed to group multiple checkboxes, radiobuttons, and switches into a single container. This component helps improve the readability and organization of your form by clearly indicating which inputs are related to each other.

Example

Live Editor

function MyFieldset () { const [termsChecked, setTermsChecked] = useState(false); const handleChange = (e) => { setTermsChecked(e.target.checked) } const items = [ { id: "1", label: "In-app revenue (from in-app purchases)", helperText: "You need to map events which generate revenue to share this data." }, { id: "2", label: "I agree to the Terms and Conditions", helperText: "It’s required to agree to the terms before enabling this feature.", checked: termsChecked, onChange: (e) => handleChange(e), required: true } ] return ( <Fieldset title='Please select your terms' type='checkbox' items={items} /> ) }

function MyFieldset () {
  const [termsChecked, setTermsChecked] = useState(false);
  const handleChange = (e) => {
    setTermsChecked(e.target.checked)
  }

  const items = [
    {
      id: "1", 
      label: "In-app revenue (from in-app purchases)",
      helperText: "You need to map events which generate revenue to share this data."
    },
    {
      id: "2",
      label: "I agree to the Terms and Conditions",
      helperText: "It’s required to agree to the terms before enabling this feature.",
      checked: termsChecked,
      onChange: (e) => handleChange(e),
      required: true
    }
  ]
  return (
    <Fieldset 
      title='Please select your terms'
      type='checkbox' 
      items={items} />
  )
}

Result

Loading...

Variants

Alignment

Fieldset alignment can align elements as block (default), or inline.

Please note that inline alignment is not recommended for more than 3 options.

Live Editor

function MyFieldset () { const items = Array.from({length: 3}, (_, index) => ({ id: `id-${index}`, label: `Label ${index + 1}` }) ) return ( <div style={{ display: 'flex', gap: '10%'}}> <Fieldset title='Block Alignment' type='radio' items={items} /> <Fieldset title='Inline Alignment' type='checkbox' items={items} alignment='inline'/> </div> ) }

function MyFieldset () {
  const items = Array.from({length: 3}, (_, index) => 
    ({
      id: `id-${index}`, 
      label: `Label ${index + 1}`
    })
  ) 

  return (
    <div style={{ display: 'flex', gap: '10%'}}>
      <Fieldset 
        title='Block Alignment'
        type='radio' 
        items={items} />
      <Fieldset 
        title='Inline Alignment'
        type='checkbox' 
        items={items} 
        alignment='inline'/>
    </div>
  )
}

Result

Loading...

Header

Fieldset headers can contain a title and a subtitle. It’s recommended to make use of the title, but the subtitle should only be used when extra introductions are required.

Live Editor

function MyFieldset () { const items = Array.from({length: 3}, (_, index) => ({ id: `id-${index}`, label: `Label ${index + 1}`, disabled: index % 2 > 0, labelPosition: 'right' // for Switch Label }) ) return ( <div style={{ display: 'flex', gap: '10%'}}> <Fieldset title='Fieldset Title' subtitle='Fieldset subtitle' type='radio' items={items} /> <Fieldset title='Fieldset Title' subtitle='Fieldset subtitle' type='switch' items={items} alignment='inline'/> </div> ) }

function MyFieldset () {
  const items = Array.from({length: 3}, (_, index) => 
    ({
      id: `id-${index}`, 
      label: `Label ${index + 1}`,
      disabled: index % 2 > 0,
      labelPosition: 'right' // for Switch Label
    })
  ) 

  return (
    <div style={{ display: 'flex', gap: '10%'}}>
      <Fieldset 
        title='Fieldset Title'
        subtitle='Fieldset subtitle'
        type='radio' 
        items={items} />
      <Fieldset 
        title='Fieldset Title'
        subtitle='Fieldset subtitle'
        type='switch' 
        items={items} 
        alignment='inline'/>
    </div>
  )
}

Result

Loading...

Types

Fieldset type supports only checkbox, radio, or switch elements.

The prop items defines the array of relavant props which Checkbox, Radio and Switch components are supporting.

Live Editor

function MyFieldset () { const items = Array.from({length: 5}, (_, index) => ({ id: `id-${index}`, label: `Label ${index + 1}`, labelPosition: 'right' // for Switch Label }) ) return ( <div style={{ display: 'flex', gap: '10%'}}> <Fieldset title='Fieldset Checkbox' type='checkbox' items={items} /> <Fieldset title='Fieldset Radio' type='radio' items={items} /> <Fieldset title='Fieldset Switch' type='switch' items={items} /> </div> ) }

function MyFieldset () {
  const items = Array.from({length: 5}, (_, index) => 
    ({
      id: `id-${index}`, 
      label: `Label ${index + 1}`,
      labelPosition: 'right' // for Switch Label
    })
  ) 

  return (
    <div style={{ display: 'flex', gap: '10%'}}>
      <Fieldset 
        title='Fieldset Checkbox'
        type='checkbox' 
        items={items} />
      <Fieldset 
        title='Fieldset Radio'
        type='radio' 
        items={items} />
      <Fieldset 
        title='Fieldset Switch'
        type='switch' 
        items={items} />
    </div>
  )
}

Result

Loading...

Props

Name	Type	Default
items * The array of items	CheckboxProps[] | RadioProps[] | SwitchProps[]	—
type * The type of elements	"switch" | "checkbox" | "radio"	—
title The header title	string	—
subtitle The header subtitle	string	—
alignment The alignment of elements	"block" | "inline"	"block"
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence	string	—
* - the prop is required.

;