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

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

Properties

NameTypeDefaultDescriptionRequired?
idstring
ID of the form element, should match the "for" value of the associated label
valuestring
namestring
labelstring
Label text to display next to the checkbox
ariaLabelstring
Label used to describe the input (if not used with an accompanying visual label)
labelPropsObject
checkedboolean
indeterminatebooleanfalse
disabledbooleanfalse
onChange(event: SyntheticEvent<HTMLInputElement>) => void
appearance
'pill'
'default'
qaObject
tabIndex
string
number
inputPropsObject

Recipes

Checkbox grouping with Fieldset

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