Fieldset

Components

Fieldset

Code

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

Name	Type	Default	Description
`label`	`React.ReactNode`		Label text to display above the fieldset
`helperText`	`React.ReactNode`
`layout`	`\| "vertical"` `\| "horizontal"`	`"vertical"`
`children`	`React.ReactNode`

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>
  )
}