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'

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'