Components

Fieldset

Fieldset lays out groupings of form elements.

Fieldset is a semantic grouping of form elements, to be used within a form. The label prop becomes a caption for the form grouping. You can put any form elements, with their labels, inside Fieldset.

import { Fieldset } from '@sproutsocial/racine'
() => {
const values = ['Chicago', 'Seattle', 'Dublin']
const [selectedValue, setSelectedValue] = useState(values[0])
const isChecked = value => value === selectedValue
return (
<Fieldset label="Select a location">
{values.map(value => (
<Box display="flex" alignItems="center">
<Radio
name="location"
value={value}
id={value}
label={value}
checked={isChecked(value)}
onChange={e => setSelectedValue(e.target.value)}
mr={300}
mb={300}
/>
</Box>
))}
</Fieldset>
)
}

Properties

NameTypeDefaultDescriptionRequired?
labelReact.Node
Label text to display above the fieldset
helperTextReact.Node
layout
'vertical'
'horizontal'
'vertical'
childrenReact.Node

Recipes

Input field grouping

<Fieldset label="Your Name">
<FormField label="First Name">{props => <Input {...props} />}</FormField>
<FormField label="Last Name">{props => <Input {...props} />}</FormField>
</Fieldset>

Horizontal Radio Buttons

() => {
const values = ['Chicago', 'Seattle', 'Dublin']
const [selectedValue, setSelectedValue] = useState(values[0])
const isChecked = value => value === selectedValue
return (
<Fieldset label="Select a location" layout="horizontal">
{values.map(value => (
<Box display="flex" alignItems="center">
<Radio
name="location"
value={value}
id={value}
label={value}
checked={isChecked(value)}
onChange={e => setSelectedValue(e.target.value)}
mr={300}
mb={300}
/>
</Box>
))}
</Fieldset>
)
}