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 >
)
}
Show more
Properties Name Type Default Description Required? labelReact.NodeLabel 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
< Fieldset label = " Select a location " layout = " horizontal " >
< Radio name = " location " label = " Chicago " checked = { true } />
< Radio name = " location " label = " Seattle " checked = { false } />
< Radio name = " location " label = " Dublin " checked = { false } />
</ Fieldset >
