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'

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'

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)
checkedboolean
indeterminatebooleanfalse
disabledbooleanfalse
onChange(event: SyntheticEvent<HTMLInputElement>) => void
appearance
"pill"
"default"
qaObject
tabIndex
string
number

Recipes

Checkbox grouping with Fieldset

Select how you'd like to receive communication
import { Fieldset } from '@sproutsocial/racine'