CheckboxGroup

Deprecated

View Source

Use CheckboxGroup from the @planningcenter/tapestry package instead. NOTE: The new component does not handle data fetching or state management.

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

PreviousCheckbox NextDateField