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'><Checkboxid='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'><Checkboxid='newsletter'appearance='pill'checked={checked}onChange={toggle}ariaLabel='Sign up for our newsletter?'ml={300}/></Tooltip></Box>)}
Properties
Name | Type | Default | Description | Required? |
---|---|---|---|---|
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 | "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"><Checkboxid='newsletter'checked={newsletterChecked}onChange={toggleNewsletter}label='Sign up for our newsletter'/><Checkboxid='texts'checked={textsChecked}onChange={toggleTexts}label='Sign up for our text messages'/></Fieldset>)}