The Checkbox component is used in forms when a user needs to select multiple values from several options.

Usage

Import

import {
  Checkbox,
  CheckboxGroup,
  FormControl,
  FormLabel,
} from '@passfort/castle'
content_copy
Copy

Example

<>
  <FormControl isRequired>
    <FormLabel>Select options</FormLabel>
    <CheckboxGroup initialValue={['1']} onChange={log}>
      <Checkbox label="PassFort" value="1" />
      <Checkbox label="PassFort" value="2" />
    </CheckboxGroup>
  </FormControl>

  <FormControl isDisabled>
    <FormLabel>Select options</FormLabel>
    <CheckboxGroup onChange={log}>
      <Checkbox label="PassFort" value="1" />
      <Checkbox label="PassFort" value="2" />
    </CheckboxGroup>
  </FormControl>
</>
<>
  <FormControl isRequired>
    <FormLabel>Select options</FormLabel>
    <CheckboxGroup initialValue={['1']} onChange={log}>
      <Checkbox label="PassFort" value="1" />
      <Checkbox label="PassFort" value="2" />
    </CheckboxGroup>
  </FormControl>

  <FormControl isDisabled>
    <FormLabel>Select options</FormLabel>
    <CheckboxGroup onChange={log}>
      <Checkbox label="PassFort" value="1" />
      <Checkbox label="PassFort" value="2" />
    </CheckboxGroup>
  </FormControl>
</>
content_copy
Copy
live example

Single

<Checkbox isChecked label="PassFort" value="1" />
<Checkbox isChecked label="PassFort" value="1" />
content_copy
Copy
live example

Tabs

<FormControl>
  <FormLabel>Select options</FormLabel>
  <CheckboxGroup type="tabs" initialValue={['1']} onChange={log}>
    <Checkbox description="10,000+ People" label="Moody's" value="1" />
    <Checkbox description="50-150 People" label="Passfort" value="2" />
  </CheckboxGroup>
</FormControl>
<FormControl>
  <FormLabel>Select options</FormLabel>
  <CheckboxGroup type="tabs" initialValue={['1']} onChange={log}>
    <Checkbox description="10,000+ People" label="Moody's" value="1" />
    <Checkbox description="50-150 People" label="Passfort" value="2" />
  </CheckboxGroup>
</FormControl>
content_copy
Copy
live example

Horizontal

<FormControl isRow>
  <FormLabel>Select options</FormLabel>
  <CheckboxGroup isRow type="tabs" initialValue={['1']} onChange={log}>
    <Checkbox label="Moody's (2)" value="1" />
    <Checkbox label="Passfort (3)" value="2" />
  </CheckboxGroup>
</FormControl>
<FormControl isRow>
  <FormLabel>Select options</FormLabel>
  <CheckboxGroup isRow type="tabs" initialValue={['1']} onChange={log}>
    <Checkbox label="Moody's (2)" value="1" />
    <Checkbox label="Passfort (3)" value="2" />
  </CheckboxGroup>
</FormControl>
content_copy
Copy
live example

Controlled

function Example() {
  const [state, setState] = React.useState('1')

  useEffect(() => {
    setState('2')
  }, [])

  const onChange = (v) => {
    log('CheckboxGroup onChange', v)
    setState(v)
  }

  return (
    <CheckboxGroup onChange={onChange} value={state}>
      <Checkbox label="Moody's (2)" value="1" />
      <Checkbox label="Passfort (3)" value="2" />
    </CheckboxGroup>
  )
}
function Example() {
  const [state, setState] = React.useState('1')

  useEffect(() => {
    setState('2')
  }, [])

  const onChange = (v) => {
    log('CheckboxGroup onChange', v)
    setState(v)
  }

  return (
    <CheckboxGroup onChange={onChange} value={state}>
      <Checkbox label="Moody's (2)" value="1" />
      <Checkbox label="Passfort (3)" value="2" />
    </CheckboxGroup>
  )
}
content_copy
Copy
live example

Custom

<Checkbox isChecked value="1">
  <Icon icon="map" />
  <Text>Custom label</Text>
</Checkbox>
<Checkbox isChecked value="1">
  <Icon icon="map" />
  <Text>Custom label</Text>
</Checkbox>
content_copy
Copy
live example