Checkbox

Components

Checkbox

Checkbox is a wrapper for the native checkbox element.

Always use the label prop or a Label component to identify and describe the purpose of a checkbox element. You can use Fieldset to group related checkboxes.

import { Checkbox } from '@sproutsocial/racine'

() => {
  const [checked, setChecked] = useState(false)
  const toggle = () => setChecked(!checked)

  return (
    <Box display='flex' justifyContent='center' alignItems='center'>
      <Checkbox 
        id='newsletter' 
        checked={checked} 
        onChange={toggle}
        label='Sign up for our newsletter?'
        ml={300}
      />
    </Box>
  )
}

() => {
  const [checked, setChecked] = useState(false)
  const toggle = () => setChecked(!checked)
  return (
    <Box display='flex' justifyContent='center' alignItems='center'>
      <Checkbox 
        id='newsletter' 
        checked={checked} 
        onChange={toggle}
        label='Sign up for our newsletter?'
        ml={300}
      />
    </Box>
  )
}

The Checkbox component also has a pill appearance that can be used in some contexts (namely, Messages). When this appearance is used, the label text should appear in a tooltip when the user hovers over or focuses on the checkbox, as well as be used for the component’s ariaLabel property.

import { Checkbox } from '@sproutsocial/racine'

() => {
  const [checked, setChecked] = useState(false)
  const toggle = () => setChecked(!checked)

  return (
    <Box display='flex' justifyContent='center' alignItems='center'>
      <Tooltip content='Sign up for our newsletter?' placement='top'>
        <Checkbox 
          id='newsletter' 
          appearance='pill'
          checked={checked} 
          onChange={toggle}
          ariaLabel='Sign up for our newsletter?'
          ml={300}
        />
      </Tooltip>
    </Box>
  )
}

() => {
  const [checked, setChecked] = useState(false)
  const toggle = () => setChecked(!checked)
  return (
    <Box display='flex' justifyContent='center' alignItems='center'>
      <Tooltip content='Sign up for our newsletter?' placement='top'>
        <Checkbox 
          id='newsletter' 
          appearance='pill'
          checked={checked} 
          onChange={toggle}
          ariaLabel='Sign up for our newsletter?'
          ml={300}
        />
      </Tooltip>
    </Box>
  )
}

Properties

Name	Type	Default	Description
`id`	`string`		ID of the form element, should match the "for" value of the associated label
`value`	`string`
`name`	`string`
`label`	`string`		Label text to display next to the checkbox
`ariaLabel`	`string`		Label used to describe the input (if not used with an accompanying visual label)
`checked`	`boolean`
`indeterminate`	`boolean`	`false`
`disabled`	`boolean`	`false`
`onChange`	`(event: SyntheticEvent<HTMLInputElement>) => void`
`appearance`	`"pill"` `"default"`
`qa`	`Object`

Recipes

Checkbox grouping with Fieldset

Select how you'd like to receive communication

import { Fieldset } from '@sproutsocial/racine'

() => {
  const [newsletterChecked, setNewsletterChecked] = useState(false)
  const [textsChecked, setTextsChecked] = useState(false)
  const toggleNewsletter = () => setNewsletterChecked(!newsletterChecked)
  const toggleTexts = () => setTextsChecked(!textsChecked)
  
  return (
    <Fieldset label="Select how you'd like to receive communication">
      <Checkbox
        id='newsletter' 
        checked={newsletterChecked} 
        onChange={toggleNewsletter}
        label='Sign up for our newsletter'
      />
      <Checkbox 
        id='texts' 
        checked={textsChecked} 
        onChange={toggleTexts}
        label='Sign up for our text messages'
      />
    </Fieldset>
  )
}

() => {
  const [newsletterChecked, setNewsletterChecked] = useState(false)
  const [textsChecked, setTextsChecked] = useState(false)
  const toggleNewsletter = () => setNewsletterChecked(!newsletterChecked)
  const toggleTexts = () => setTextsChecked(!textsChecked)
  
  return (
    <Fieldset label="Select how you'd like to receive communication">
      <Checkbox
        id='newsletter' 
        checked={newsletterChecked} 
        onChange={toggleNewsletter}
        label='Sign up for our newsletter'
      />
      <Checkbox 
        id='texts' 
        checked={textsChecked} 
        onChange={toggleTexts}
        label='Sign up for our text messages'
      />
    </Fieldset>
  )
}