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} /> ) }
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> ) }
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> ) }
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> ) }
Result
Loading...
Props
Name | Type | Default |
---|---|---|
items * The array of items |
| — |
type * The type of elements |
| — |
title The header title |
| — |
subtitle The header subtitle |
| — |
alignment The alignment of elements |
| "block" |
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence |
| — |
* - the prop is required. |