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

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

COMMON

Learn more

Name	Type	Default	Description
`id`	`string`		ID of the form element, should match the "for" value of the associated label
`value`	`string`		value attribute
`name`	`string`		name attribute
`label`	`string`		label text to display
`ariaLabel`	`string`		Label used to describe the input if not used with an accompanying label
`checked`	`boolean`		Whether or not the checkbox is checked
`indeterminate`	`boolean`	`false`	Whether or not the checkbox is in an indeterminate state
`disabled`	`boolean`	`false`	Whether or not the checkbox is disabled
`onChange`	`signature`		onChange callback
`appearance`	`"pill""default"`		The checkbox style
`qa`	`Object`		Customizable QA Object - for backwards compatibility

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>
  )
}