Checkbox

Implementation

import { Checkbox } from "slipstream-ui";

const Example = () => <Checkbox >Checkbox Label<Checkbox>;

Default

Example

Checkbox Label

<FormGroup>

<Checkbox id="CheckboxID">Checkbox Label</Checkbox>

</FormGroup>

Color

Example

Default

Primary

Success

Warning

Danger

<Checkbox color="default">...</Checkbox>

<Checkbox color="primary">...</Checkbox>

<Checkbox color="success">...</Checkbox>

<Checkbox color="warning">...</Checkbox>

<Checkbox color="danger">...</Checkbox>

Validation

Example

Invalid

Disabled

<Checkbox invalid>...</Checkbox>

<Checkbox disabled>...</Checkbox>

Required

Example

Checkbox Label*

<Checkbox required>...</Checkbox>

Size

Example

Medium (Default) - size="md"

Large - size="lg"

<Checkbox size="lg">...</Checkbox>

Right-To-Left (rtl)

Example

Checkbox Label

<Checkbox rtl>...</Checkbox>

Props

Attribute	Type	Value	Default Value	Description
id	string			Matches the label in connection with the checkbox (htmlFor/id)
size	string	md/lg	md	UI size of Checkbox and Label
color	string	danger/default/primary success/warning/invalid	primary	Color of Checkbox when checked
invalid	boolean	true/false		Red text for Checkbox's label
disabled	boolean	true/false		Disabled the element from user interaction
required	boolean	true/false		Set the Checkbox as required and update Label UI to required
rtl	boolean	true/false		When true, sets element to direction of right-to-left (rtl)
labelProps	LabelProps			Pass in props you find useful for the Label component