Primer/React

What's new

Design

Interface guidelines Octicons Presentations Command line Mobile Desktop

Build

CSS React ViewComponents

Contribute About

On this page

ChoiceFieldset

Deprecated

View source View storybook

On this page

A ChoiceFieldset is a controlled component that is used to render a related set of checkbox or radio inputs.

Deprecation

Use CheckboxGroup or RadioGroup instead.

Examples

Basic

<ChoiceFieldset>
  <ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
  <ChoiceFieldset.List>
    <ChoiceFieldset.Item value="dark">Dark</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="hc-dark">High-contrast dark</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="light">Light</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="hc-light">High-contrast light</ChoiceFieldset.Item>
  </ChoiceFieldset.List>
</ChoiceFieldset>

<ChoiceFieldset>
  <ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
  <ChoiceFieldset.List>
    <ChoiceFieldset.Item value="dark">Dark</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="hc-dark">High-contrast dark</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="light">Light</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="hc-light">High-contrast light</ChoiceFieldset.Item>
  </ChoiceFieldset.List>
</ChoiceFieldset>

Using an onSelect handler

const WithOnSelectHandler = () => {
  const [selectedChoices, setSelectedChoices] = React.useState([])
  const choices = [
    {
      value: 'figma',
      displayName: 'Figma library',
      description: 'The Figma file where we have Figma symbols and light documentation'
    },
    {
      value: 'css',
      displayName: 'Primer CSS',
      description: 'The OG. A CSS library with utility styles and component styles'
    },
    {
      value: 'react',
      displayName: 'Primer React components',
      description: 'The React component library that these docs belong to'
    },
    {
      value: 'viewcomponents',
      displayName: 'Primer ViewComponents',
      description: 'The Rails and Web Components implementation of our components'
    }
  ]

  return (
    <>
      <ChoiceFieldset
        onSelect={selectedValues => {
          setSelectedChoices(selectedValues)
        }}
        selected={selectedChoices}
      >
        <ChoiceFieldset.Legend>Prefered Primer component interface</ChoiceFieldset.Legend>
        <ChoiceFieldset.Description>
          Your choice won't be used for anything, this is just a React example
        </ChoiceFieldset.Description>
        <ChoiceFieldset.List>
          {choices.map(choice => (
            <ChoiceFieldset.Item value={choice.value} key={choice.value}>
              <Item.Label>{choice.displayName}</Item.Label>
              <Item.Caption>{choice.description}</Item.Caption>
            </ChoiceFieldset.Item>
          ))}
        </ChoiceFieldset.List>
      </ChoiceFieldset>
      {selectedChoices.length ? (
        <Box mt={2}>
          <em>{choices.find(choice => choice.value === selectedChoices[0]).displayName}</em> is your favorite? Ours too.
        </Box>
      ) : null}
    </>
  )
}

render(<WithOnSelectHandler />)

const WithOnSelectHandler = () => {
  const [selectedChoices, setSelectedChoices] = React.useState([])
  const choices = [
    {
      value: 'figma',
      displayName: 'Figma library',
      description: 'The Figma file where we have Figma symbols and light documentation'
    },
    {
      value: 'css',
      displayName: 'Primer CSS',
      description: 'The OG. A CSS library with utility styles and component styles'
    },
    {
      value: 'react',
      displayName: 'Primer React components',
      description: 'The React component library that these docs belong to'
    },
    {
      value: 'viewcomponents',
      displayName: 'Primer ViewComponents',
      description: 'The Rails and Web Components implementation of our components'
    }
  ]

  return (
    <>
      <ChoiceFieldset
        onSelect={selectedValues => {
          setSelectedChoices(selectedValues)
        }}
        selected={selectedChoices}
      >
        <ChoiceFieldset.Legend>Prefered Primer component interface</ChoiceFieldset.Legend>
        <ChoiceFieldset.Description>
          Your choice won't be used for anything, this is just a React example
        </ChoiceFieldset.Description>
        <ChoiceFieldset.List>
          {choices.map(choice => (
            <ChoiceFieldset.Item value={choice.value} key={choice.value}>
              <Item.Label>{choice.displayName}</Item.Label>
              <Item.Caption>{choice.description}</Item.Caption>
            </ChoiceFieldset.Item>
          ))}
        </ChoiceFieldset.List>
      </ChoiceFieldset>
      {selectedChoices.length ? (
        <Box mt={2}>
          <em>{choices.find(choice => choice.value === selectedChoices[0]).displayName}</em> is your favorite? Ours too.
        </Box>
      ) : null}
    </>
  )
}

render(<WithOnSelectHandler />)

Checkbox group

<ChoiceFieldset>
  <ChoiceFieldset.Legend>Prefered Primer component interface</ChoiceFieldset.Legend>

  <ChoiceFieldset.List selectionVariant="multiple">
    <ChoiceFieldset.Item value="figma">Figma library</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="css">Primer CSS</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="react">Primer React components</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="viewcomponents">Primer ViewComponents</ChoiceFieldset.Item>
  </ChoiceFieldset.List>
</ChoiceFieldset>

<ChoiceFieldset>
  <ChoiceFieldset.Legend>Prefered Primer component interface</ChoiceFieldset.Legend>

  <ChoiceFieldset.List selectionVariant="multiple">
    <ChoiceFieldset.Item value="figma">Figma library</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="css">Primer CSS</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="react">Primer React components</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="viewcomponents">Primer ViewComponents</ChoiceFieldset.Item>
  </ChoiceFieldset.List>
</ChoiceFieldset>

Disabled

<ChoiceFieldset disabled>
  <ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
  <ChoiceFieldset.List>
    <ChoiceFieldset.Item value="dark">Dark</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="hc-dark">High-contrast dark</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="light">Light</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="hc-light">High-contrast light</ChoiceFieldset.Item>
  </ChoiceFieldset.List>
</ChoiceFieldset>

<ChoiceFieldset disabled>
  <ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
  <ChoiceFieldset.List>
    <ChoiceFieldset.Item value="dark">Dark</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="hc-dark">High-contrast dark</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="light">Light</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="hc-light">High-contrast light</ChoiceFieldset.Item>
  </ChoiceFieldset.List>
</ChoiceFieldset>

Required

<ChoiceFieldset required>
  <ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
  <ChoiceFieldset.List>
    <ChoiceFieldset.Item value="dark">Dark</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="hc-dark">High-contrast dark</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="light">Light</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="hc-light">High-contrast light</ChoiceFieldset.Item>
  </ChoiceFieldset.List>
</ChoiceFieldset>

<ChoiceFieldset required>
  <ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
  <ChoiceFieldset.List>
    <ChoiceFieldset.Item value="dark">Dark</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="hc-dark">High-contrast dark</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="light">Light</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="hc-light">High-contrast light</ChoiceFieldset.Item>
  </ChoiceFieldset.List>
</ChoiceFieldset>

With pre-selected choices

<ChoiceFieldset selected={['figma', 'react']}>
  <ChoiceFieldset.Legend>Prefered Primer component interface</ChoiceFieldset.Legend>

  <ChoiceFieldset.List selectionVariant="multiple">
    <ChoiceFieldset.Item value="figma">Figma library</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="css">Primer CSS</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="react">Primer React components</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="viewcomponents">Primer ViewComponents</ChoiceFieldset.Item>
  </ChoiceFieldset.List>
</ChoiceFieldset>

<ChoiceFieldset selected={['figma', 'react']}>
  <ChoiceFieldset.Legend>Prefered Primer component interface</ChoiceFieldset.Legend>

  <ChoiceFieldset.List selectionVariant="multiple">
    <ChoiceFieldset.Item value="figma">Figma library</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="css">Primer CSS</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="react">Primer React components</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="viewcomponents">Primer ViewComponents</ChoiceFieldset.Item>
  </ChoiceFieldset.List>
</ChoiceFieldset>

With validation

const choices = [
  {
    value: 'figma',
    displayName: 'Figma library',
    description: 'The Figma file where we have Figma symbols and light documentation'
  },
  {
    value: 'css',
    displayName: 'Primer CSS',
    description: 'The OG. A CSS library with utility styles and component styles'
  },
  {
    value: 'react',
    displayName: 'Primer React components',
    description: 'The React component library that these docs belong to'
  },
  {
    value: 'viewcomponents',
    displayName: 'Primer ViewComponents',
    description: 'The Rails and Web Components implementation of our components'
  }
]

const ChoiceFieldsetWithValidation = () => {
  const [selectedChoices, setSelectedChoices] = React.useState([])
  const [validationResult, setValidationResult] = React.useState()

  React.useEffect(() => {
    if (selectedChoices.length && selectedChoices.length > 2) {
      setValidationResult('tooManySelections')
    } else {
      setValidationResult(undefined)
    }
  }, [selectedChoices])

  return (
    <ChoiceFieldset
      name="radioGroup"
      onSelect={selectedValues => {
        setSelectedChoices(selectedValues)
      }}
      validationMap={{tooManySelections: 'error'}}
      validationResult={validationResult}
      selected={selectedChoices}
    >
      <ChoiceFieldset.Legend>Prefered Primer component interface</ChoiceFieldset.Legend>
      <ChoiceFieldset.Description>Pick your top two</ChoiceFieldset.Description>

      <ChoiceFieldset.List selectionVariant="multiple">
        {choices.map(choice => (
          <ChoiceFieldset.Item value={choice.value}>
            <Item.Label>{choice.displayName}</Item.Label>
            <Item.Caption>{choice.description}</Item.Caption>
          </ChoiceFieldset.Item>
        ))}
      </ChoiceFieldset.List>

      <ChoiceFieldset.Validation validationKey="tooManySelections">
        Only two selections are allowed
      </ChoiceFieldset.Validation>
    </ChoiceFieldset>
  )
}

render(<ChoiceFieldsetWithValidation />)

const choices = [
  {
    value: 'figma',
    displayName: 'Figma library',
    description: 'The Figma file where we have Figma symbols and light documentation'
  },
  {
    value: 'css',
    displayName: 'Primer CSS',
    description: 'The OG. A CSS library with utility styles and component styles'
  },
  {
    value: 'react',
    displayName: 'Primer React components',
    description: 'The React component library that these docs belong to'
  },
  {
    value: 'viewcomponents',
    displayName: 'Primer ViewComponents',
    description: 'The Rails and Web Components implementation of our components'
  }
]

const ChoiceFieldsetWithValidation = () => {
  const [selectedChoices, setSelectedChoices] = React.useState([])
  const [validationResult, setValidationResult] = React.useState()

  React.useEffect(() => {
    if (selectedChoices.length && selectedChoices.length > 2) {
      setValidationResult('tooManySelections')
    } else {
      setValidationResult(undefined)
    }
  }, [selectedChoices])

  return (
    <ChoiceFieldset
      name="radioGroup"
      onSelect={selectedValues => {
        setSelectedChoices(selectedValues)
      }}
      validationMap={{tooManySelections: 'error'}}
      validationResult={validationResult}
      selected={selectedChoices}
    >
      <ChoiceFieldset.Legend>Prefered Primer component interface</ChoiceFieldset.Legend>
      <ChoiceFieldset.Description>Pick your top two</ChoiceFieldset.Description>

      <ChoiceFieldset.List selectionVariant="multiple">
        {choices.map(choice => (
          <ChoiceFieldset.Item value={choice.value}>
            <Item.Label>{choice.displayName}</Item.Label>
            <Item.Caption>{choice.description}</Item.Caption>
          </ChoiceFieldset.Item>
        ))}
      </ChoiceFieldset.List>

      <ChoiceFieldset.Validation validationKey="tooManySelections">
        Only two selections are allowed
      </ChoiceFieldset.Validation>
    </ChoiceFieldset>
  )
}

render(<ChoiceFieldsetWithValidation />)

<ChoiceFieldset>
  <ChoiceFieldset.Legend visuallyHidden>Color mode</ChoiceFieldset.Legend>
  <ChoiceFieldset.List>
    <ChoiceFieldset.Item value="dark">Dark</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="hc-dark">High-contrast dark</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="light">Light</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="hc-light">High-contrast light</ChoiceFieldset.Item>
  </ChoiceFieldset.List>
</ChoiceFieldset>

<ChoiceFieldset>
  <ChoiceFieldset.Legend visuallyHidden>Color mode</ChoiceFieldset.Legend>
  <ChoiceFieldset.List>
    <ChoiceFieldset.Item value="dark">Dark</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="hc-dark">High-contrast dark</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="light">Light</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="hc-light">High-contrast light</ChoiceFieldset.Item>
  </ChoiceFieldset.List>
</ChoiceFieldset>

With a ChoiceFieldset.Description

<ChoiceFieldset>
  <ChoiceFieldset.Legend>Notification preferences</ChoiceFieldset.Legend>
  <ChoiceFieldset.Description>
    Your selection will affect notifications sent to your email and mobile device
  </ChoiceFieldset.Description>

  <ChoiceFieldset.List>
    <ChoiceFieldset.Item value="all">
      <Item.LeadingVisual>
        <CheckIcon />
      </Item.LeadingVisual>
      <Item.Label>All notifications</Item.Label>
      <Item.Caption>Every possible notification</Item.Caption>
    </ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="relevant">
      <Item.LeadingVisual>
        <AlertIcon />
      </Item.LeadingVisual>
      <Item.Label>Relevant notifications</Item.Label>
      <Item.Caption>Only the ones you'll care about</Item.Caption>
    </ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="none">
      <Item.LeadingVisual>
        <XIcon />
      </Item.LeadingVisual>
      <Item.Label>No notifications</Item.Label>
      <Item.Caption>Notifications won't be sent</Item.Caption>
    </ChoiceFieldset.Item>
  </ChoiceFieldset.List>
</ChoiceFieldset>

<ChoiceFieldset>
  <ChoiceFieldset.Legend>Notification preferences</ChoiceFieldset.Legend>
  <ChoiceFieldset.Description>
    Your selection will affect notifications sent to your email and mobile device
  </ChoiceFieldset.Description>

  <ChoiceFieldset.List>
    <ChoiceFieldset.Item value="all">
      <Item.LeadingVisual>
        <CheckIcon />
      </Item.LeadingVisual>
      <Item.Label>All notifications</Item.Label>
      <Item.Caption>Every possible notification</Item.Caption>
    </ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="relevant">
      <Item.LeadingVisual>
        <AlertIcon />
      </Item.LeadingVisual>
      <Item.Label>Relevant notifications</Item.Label>
      <Item.Caption>Only the ones you'll care about</Item.Caption>
    </ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="none">
      <Item.LeadingVisual>
        <XIcon />
      </Item.LeadingVisual>
      <Item.Label>No notifications</Item.Label>
      <Item.Caption>Notifications won't be sent</Item.Caption>
    </ChoiceFieldset.Item>
  </ChoiceFieldset.List>
</ChoiceFieldset>

With one disabled item

<ChoiceFieldset>
  <ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
  <ChoiceFieldset.List>
    <ChoiceFieldset.Item disabled value="dark">
      Dark
    </ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="hc-dark">High-contrast dark</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="light">Light</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="hc-light">High-contrast light</ChoiceFieldset.Item>
  </ChoiceFieldset.List>
</ChoiceFieldset>

<ChoiceFieldset>
  <ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
  <ChoiceFieldset.List>
    <ChoiceFieldset.Item disabled value="dark">
      Dark
    </ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="hc-dark">High-contrast dark</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="light">Light</ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="hc-light">High-contrast light</ChoiceFieldset.Item>
  </ChoiceFieldset.List>
</ChoiceFieldset>

Items with a caption and a leading visual

<ChoiceFieldset>
  <ChoiceFieldset.Legend>Notification preferences</ChoiceFieldset.Legend>

  <ChoiceFieldset.List>
    <ChoiceFieldset.Item value="all">
      <Item.LeadingVisual>
        <CheckIcon />
      </Item.LeadingVisual>
      <Item.Label>All notifications</Item.Label>
      <Item.Caption>Every possible notification</Item.Caption>
    </ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="relevant">
      <Item.LeadingVisual>
        <AlertIcon />
      </Item.LeadingVisual>
      <Item.Label>Relevant notifications</Item.Label>
      <Item.Caption>Only the ones you'll care about</Item.Caption>
    </ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="none">
      <Item.LeadingVisual>
        <XIcon />
      </Item.LeadingVisual>
      <Item.Label>No notifications</Item.Label>
      <Item.Caption>Notifications won't be sent</Item.Caption>
    </ChoiceFieldset.Item>
  </ChoiceFieldset.List>
</ChoiceFieldset>

<ChoiceFieldset>
  <ChoiceFieldset.Legend>Notification preferences</ChoiceFieldset.Legend>

  <ChoiceFieldset.List>
    <ChoiceFieldset.Item value="all">
      <Item.LeadingVisual>
        <CheckIcon />
      </Item.LeadingVisual>
      <Item.Label>All notifications</Item.Label>
      <Item.Caption>Every possible notification</Item.Caption>
    </ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="relevant">
      <Item.LeadingVisual>
        <AlertIcon />
      </Item.LeadingVisual>
      <Item.Label>Relevant notifications</Item.Label>
      <Item.Caption>Only the ones you'll care about</Item.Caption>
    </ChoiceFieldset.Item>
    <ChoiceFieldset.Item value="none">
      <Item.LeadingVisual>
        <XIcon />
      </Item.LeadingVisual>
      <Item.Label>No notifications</Item.Label>
      <Item.Caption>Notifications won't be sent</Item.Caption>
    </ChoiceFieldset.Item>
  </ChoiceFieldset.List>
</ChoiceFieldset>

Props

ChoiceFieldset

Name	Type	Default	Description
children*	`ChoiceFieldset.Legend`, `ChoiceFieldset.Description`, `ChoiceFieldset.List`, `ChoiceFieldset.Validation`	–	The list of choices and contextual information
disabled	`boolean`	–	Whether the fieldset is NOT ready for user input
id	`string`	–	The unique identifier for this fieldset. Used to associate the validation text with the fieldset If an ID is not passed, one will be automatically generated
name	`string`	–	The unique identifier used to associate radio inputs with eachother If a name is not passed and the fieldset renders radio inputs, a name will be automatically generated
onSelect	`(selectedValues?: string[]) => void`	–	The callback that is called when a user toggles a choice on or off
required	`boolean`	–	Whether this field must have a value for the user to complete their task
selected	`string[]`	–	The selected values
validationMap	`Record<string, 'error' \\| 'success'>`	–	A map of validation statuses and their associated validation keys. When one of the validation keys is passed to the `validationResult` prop, the associated validation message will be rendered in the correct style
validationResult	`keyof validationMap`	–	The key of the validation message to show

ChoiceFieldset.Legend

A title for the set of choices. A ChoiceFieldset.Legend must be passed, but it may be visually hidden.

Name	Type	Default	Description
visuallyHidden	`boolean`	–	Whether to visually hide the fieldset legend

ChoiceFieldset.List

The list choices are rendered in.

Name	Type	Default	Description
children*	`ChoiceFieldset.Item`	–	The choices that render as a checkbox or radio field
selectionVariant	`'single'\\|'multiple'`	–	Whether multiple items or a single item can be selected

ChoiceFieldset.Item

Renders a choice to the list as a checkbox or radio field.

Name	Type	Default	Description
children*	`ChoiceFieldset.Caption`, `ChoiceFieldset.Label`, `ChoiceFieldset.LeadingVisual`, `React.ReactNode`	–	The parts that make up the checkbox or radio field used to select the choice. If you only need a label, it's fine to pass in a string or JSX instead of wrapping it in the `Item.Label` component
value*	`string`	–	The value that is being selected
disabled	`boolean`	–	Whether the field is ready for user input
id	`string`	–	The unique identifier for this field. Used to associate the label, validation text, and caption text. If an ID is not provided, one will be automatically generated.

ChoiceFieldset.Description

A ChoiceFieldset.Description may be used to render hint text if this list needs additional context to guide a user to make their selection

Name	Type	Default	Description
children*	`React.ReactNode`	–	The description content

ChoiceFieldset.Validation

If the user's selection has been flagged during validation, ChoiceFieldset.Validation may be used to render contextual validation information to help the user complete their task

Name	Type	Default	Description
children*	`React.ReactNode`	–	The validation message
validationKey*	`string`	–	When this matches the `validationResult` prop on the parent `ChoiceFieldset` component, this validation component will be rendered

Status

Alpha

Component props are documented on primer.style/react.
Component does not have any unnecessary third-party dependencies.
Component can adapt to different themes.
Component can adapt to different screen sizes.
Component has 100% test coverage.

Beta

Component is used in a production application.
Common usage examples are documented on primer.style/react.
Common usage examples are documented in storybook stories.
Component has been reviewed by a systems designer and any resulting issues have been addressed.
Component has been manually reviewed by the accessibility team and any resulting issues have been addressed.

Stable

Component API has been stable with no breaking changes for at least one month.
Feedback on API usability has been sought from developers using the component and any resulting issues have been addressed.
Component has corresponding design guidelines documented in the interface guidelines.
Component has corresponding Figma component in the Primer Web library.

Edit this page on GitHub

1 contributor

Last edited by colebemis on March 9, 2022

ChoiceFieldset

Deprecation

Examples

Basic

Using an onSelect handler

Checkbox group

Disabled

Required

With pre-selected choices

With validation

A visually hidden legend

With a ChoiceFieldset.Description

With one disabled item

Items with a caption and a leading visual

Props

ChoiceFieldset

ChoiceFieldset.Legend

ChoiceFieldset.List

ChoiceFieldset.Item

ChoiceFieldset.Description

ChoiceFieldset.Validation

Status

Alpha

Beta

Stable

Related components