React Design System: component Checkbox

Checkbox

A checkbox allows the user to toggle between checked, unchecked, and (rarely) indeterminate states.

Checkbox

Overview

API

Code

Component 'Checkbox'

First, you need to import a component to your code (сheck component path is right):

import Checkbox from "../../core/Checkbox";

To use the component, copy and paste an example from the CODE tab.
Default props of component can be omitted, they are applied automatically. For example, you can skip the prop type='def', because 'def' is the default value of prop 'type'.

type

string = def

This prop set the shape of the component. Possible states: def | dense . The default state is def.

view

string = flat

This prop set the view of the component. Possible states: flat . The default state is flat.

color

string = default

className

string

A space-delimited list of class names to pass along to a child element.

label

string

Text label for the control.

helperText

string

Second line text

fill

boolean = false

Whether this button should expand to fill its container. The default state is false.

checked

boolean

Whether the control is checked.

right

boolean = false

Alignment of the indicator within container.

indeterminate

boolean = false

Whether this checkbox is indeterminate, or "partially checked." The checkbox will appear with a small dash instead of a tick to indicate that the value is not exactly true or false. The default state isfalse

disabled

boolean = false

If set to true, the component will be disabled. The default state isfalse

onChange

func

Event handler invoked when input value is changed.

rtl

boolean = false

Set the text direction to "right-to-left".