Components

Checkbox

Allow users to select and deselect items in bulk

Selected Theme

Select brand or tribe name to preview style

Default

Usage

A checkbox is used to select a single item or multiple items, typically to choose elements to perform an action or to reflect a binary setting.

import { Checkbox } from 'legion-ui';

Variant

Checkbox has two variants namely check and indeterminate.

<Checkbox variant="check"/>
<Checkbox variant="indeterminate"/>

Label

You can provide a label to the checkbox with label.

Check

Indeterminate

<Checkbox label="Check"/>
<Checkbox label="Indeterminate" variant="indeterminate"/>

Disabled

Make checkbox look inactive by adding the disabled.

<Checkbox disabled/>
<Checkbox disabled variant="indeterminate"/>
<Checkbox checked disabled/>
<Checkbox checked disabled variant="indeterminate"/>

Attribute

You can customize Anchor with attributes, anchors in legion have only one attribute which is size

Size

The checkbox has two sizes, lg and sm.

<Checkbox size="lg" variant="check"/>
<Checkbox size="lg" variant="indeterminate"/>
<Checkbox size="sm" variant="check"/>
<Checkbox size="sm" variant="indeterminate"/>

Props

property	propType	required	default	description
disabled	boolean	-	`false`	Disabled state of checkbox
label	string	-	-	The checkbox title
size	`lg` \| `sm`	-	`lg`	Set the size of checkbox
variant	`check`\| `indeterminate`	-	`check`	Checkbox appearance’s variant

Do you have feedback?

Please let us know to make it better

Send Feedback