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']} >
      <Checkbox label="PassFort" value="1"/>
      <Checkbox label="PassFort" value="2"/>
    </CheckboxGroup>
  </FormControl>

  <FormControl isDisabled>
    <FormLabel>Select options</FormLabel>
    <CheckboxGroup>
      <Checkbox label="PassFort" value="1"/>
      <Checkbox label="PassFort" value="2"/>
    </CheckboxGroup>
  </FormControl>

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

  <FormControl isDisabled>
    <FormLabel>Select options</FormLabel>
    <CheckboxGroup>
      <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']}>
      <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']}>
      <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 type="tabs" initialValue={['1']}>
      <Checkbox  label="Moody's (2)" value="1"/>
      <Checkbox label="Passfort (3)" value="2"/>
    </CheckboxGroup>
  </FormControl>


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


</>
content_copy
Copy
live example