CheckboxGroup

View Source

Manage a group of checkboxes with one value and one callback.

One

Two

Three

Four

render(() => {
  const [value, setValue] = React.useState(['One', 'Three'])
  return (
    <CheckboxGroup
      name="checkbox-group"
      value={value}
      onChange={(value) => {
        console.log(value)
        setValue(value)
      }}
    >
      <StackView axis="horizontal" spacing={2}>
        {['One', 'Two', 'Three', 'Four'].map((value) => (
          <Checkbox key={value} value={value} label={value} />
        ))}
      </StackView>
    </CheckboxGroup>
  )
})

render(() => {
  const [value, setValue] = React.useState(['One', 'Three'])
  return (
    <CheckboxGroup
      name="checkbox-group"
      value={value}
      onChange={(value) => {
        console.log(value)
        setValue(value)
      }}
    >
      <StackView axis="horizontal" spacing={2}>
        {['One', 'Two', 'Three', 'Four'].map((value) => (
          <Checkbox key={value} value={value} label={value} />
        ))}
      </StackView>
    </CheckboxGroup>
  )
})

Props

Accepts Card props.

childrenReactReactNode

namestring

Maps to the corresponding Checkbox name prop.

onChange(value: string[]) => void

Callback when any child Checkbox fires its onChange callback. Receives new array of values.

valueArray

Accepts an array of strings that match the corresponding Checkbox values that should be checked.

Props

PreviousCheckboxCard NextCombobox