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?
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)
labelProps
TypeTextProps
checked
boolean
indeterminate
boolean
false
disabled
boolean
false
onChange
(event: React.SyntheticEvent<HTMLInputElement>) => void
appearance
"pill"
"default"
qa
object
inputProps
React.ComponentPropsWithoutRef<"input">

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