Checkbox

Basic

It receives the same props as controlled inputs, such as checked and onChange.


 Check me
import React from 'react'
import { Checkbox, Boxer } from '@smooth-ui/core-sc'

function Example() {
  const [checked, setChecked] = React.useState(false)
  const toggle = () => setChecked(!checked)
  return (
    <label>
      <Checkbox checked={checked} onChange={toggle} /> Check me
    </label>
  )
}

render(<Example />)import React from 'react'
import { Checkbox, Boxer } from '@smooth-ui/core-sc'
function Example() {
  const [checked, setChecked] = React.useState(false)
  const toggle = () => setChecked(!checked)
  return (
    <label>
      <Checkbox checked={checked} onChange={toggle} /> Check me
    </label>
  )
}
render(<Example />)

useCheckboxState

For convenience, Reakit provides a useCheckboxState that already implements the state logic.


 Check me
import React from 'react'
import { Checkbox, useCheckboxState } from '@smooth-ui/core-sc'

function Example() {
  const checkbox = useCheckboxState()
  return (
    <label>
      <Checkbox {...checkbox} /> Check me
    </label>
  )
}

render(<Example />)import React from 'react'
import { Checkbox, useCheckboxState } from '@smooth-ui/core-sc'
function Example() {
  const checkbox = useCheckboxState()
  return (
    <label>
      <Checkbox {...checkbox} /> Check me
    </label>
  )
}
render(<Example />)

Sizes

Set scales using scale prop like "xs", "sm", "lg" or "xl". The default scale is "base".


Extra small
Small
Base (default)
Large
Extra large
import React from 'react'
import {
  Checkbox,
  useCheckboxState,
  FormCheck,
  FormCheckLabel,
  Boxer,
} from '@smooth-ui/core-sc'

function Example() {
  const checkbox = useCheckboxState()
  return (
    <Boxer my={3}>
      <FormCheck>
        <Checkbox {...checkbox} scale="xs" name="xs" />
        <FormCheckLabel scale="xs" name="xs">
          Extra small
        </FormCheckLabel>
      </FormCheck>
      <FormCheck>
        <Checkbox {...checkbox} scale="sm" name="sm" />
        <FormCheckLabel scale="sm" name="sm">
          Small
        </FormCheckLabel>
      </FormCheck>
      <FormCheck>
        <Checkbox {...checkbox} scale="base" name="base" />
        <FormCheckLabel scale="base" name="base">
          Base (default)
        </FormCheckLabel>
      </FormCheck>
      <FormCheck>
        <Checkbox {...checkbox} scale="lg" name="lg" />
        <FormCheckLabel scale="lg" name="lg">
          Large
        </FormCheckLabel>
      </FormCheck>
      <FormCheck>
        <Checkbox {...checkbox} scale="xl" name="xl" />
        <FormCheckLabel scale="xl" name="xl">
          Extra large
        </FormCheckLabel>
      </FormCheck>
    </Boxer>
  )
}

render(<Example />)import React from 'react'
import {
  Checkbox,
  useCheckboxState,
  FormCheck,
  FormCheckLabel,
  Boxer,
} from '@smooth-ui/core-sc'
function Example() {
  const checkbox = useCheckboxState()
  return (
    <Boxer my={3}>
      <FormCheck>
        <Checkbox {...checkbox} scale="xs" name="xs" />
        <FormCheckLabel scale="xs" name="xs">
          Extra small
        </FormCheckLabel>
      </FormCheck>
      <FormCheck>
        <Checkbox {...checkbox} scale="sm" name="sm" />
        <FormCheckLabel scale="sm" name="sm">
          Small
        </FormCheckLabel>
      </FormCheck>
      <FormCheck>
        <Checkbox {...checkbox} scale="base" name="base" />
        <FormCheckLabel scale="base" name="base">
          Base (default)
        </FormCheckLabel>
      </FormCheck>
      <FormCheck>
        <Checkbox {...checkbox} scale="lg" name="lg" />
        <FormCheckLabel scale="lg" name="lg">
          Large
        </FormCheckLabel>
      </FormCheck>
      <FormCheck>
        <Checkbox {...checkbox} scale="xl" name="xl" />
        <FormCheckLabel scale="xl" name="xl">
          Extra large
        </FormCheckLabel>
      </FormCheck>
    </Boxer>
  )
}
render(<Example />)

Disabled

Disable using disabled prop.


Disabled 🤷‍♂️
import React from 'react'
import {
  Checkbox,
  FormCheck,
  FormCheckLabel,
  useCheckboxState,
} from '@smooth-ui/core-sc'

function Example() {
  const checkbox = useCheckboxState({ state: true })
  return (
    <FormCheck>
      <Checkbox disabled {...checkbox} />
      <FormCheckLabel>Disabled 🤷‍♂️</FormCheckLabel>
    </FormCheck>
  )
}

render(<Example />)import React from 'react'
import {
  Checkbox,
  FormCheck,
  FormCheckLabel,
  useCheckboxState,
} from '@smooth-ui/core-sc'
function Example() {
  const checkbox = useCheckboxState({ state: true })
  return (
    <FormCheck>
      <Checkbox disabled {...checkbox} />
      <FormCheckLabel>Disabled 🤷‍♂️</FormCheckLabel>
    </FormCheck>
  )
}
render(<Example />)

Accessibility

Checkbox uses Reakit Checkbox under the hood, it means it follows WAI-ARIA Checkbox Pattern.

CheckboxGroup follows WAI_ARIA Checkbox Group Pattern.

API

useCheckboxState

See Reakit documentation.

Checkbox

Property	Type	Required	Default	Description
checked	boolean	false	-	Checkbox's checked state. If present, it's used instead of state.
disabled	boolean	false	-	Same as the HTML attribute.
focusable	boolean	false	-	When an element is `disabled`, it may still be `focusable`. It works similarly to `readOnly` on form elements. In this case, only `aria-disabled` will be set.
onChange	function	false	-	Same as the "checkbox" `onChange` prop.
scale	enum	false	base	Control the size of the component.
Show xstyled properties

Switch also includes a bunch of state properties, see Reakit documentation.

CheckboxGroup

Property	Type	Required	Default	Description
children	node	false	-
aria-orientation	enum	false	-	Specify the orientation of the checkbox group.
Show xstyled properties

Smooth UI

Checkbox

Basic

useCheckboxState

Sizes

Disabled

Accessibility

API

useCheckboxState

Checkbox

CheckboxGroup