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
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) | ||
checked | boolean | |||
indeterminate | boolean | false | ||
disabled | boolean | false | ||
onChange | (event: SyntheticEvent<HTMLInputElement>) => void | |||
appearance | "pill" "default" | |||
qa | Object | |||
tabIndex | string number | |||
inputProps | Object |
Recipes
Checkbox grouping with Fieldset
import { Fieldset } from '@sproutsocial/racine'