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 System props
System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.
Name Type Default Description Required? labelReact.NodeLabel text to display above the fieldset
helperTextReact.Node
layout"vertical""horizontal""vertical"
childrenReactNode
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 >
