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

System props

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

NameTypeDefaultDescriptionRequired?
idstring
ID of the form element, should match the "for" value of the associated label
valuestring
value attribute
namestring
name attribute
labelstring
label text to display
ariaLabelstring
Label used to describe the input if not used with an accompanying label
checkedboolean
Whether or not the checkbox is checked
indeterminatebooleanfalse
Whether or not the checkbox is in an indeterminate state
disabledbooleanfalse
Whether or not the checkbox is disabled
onChangesignature
onChange callback
appearance"pill""default"
The checkbox style
qaObject
Customizable QA Object - for backwards compatibility

Recipes

Checkbox grouping with Fieldset

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