Checkbox | Seeds

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

Recipes

Checkbox grouping with Fieldset

import { Fieldset } from '@sproutsocial/racine'

[ad_2]

Leave a comment

Your email address will not be published. Required fields are marked *