Skip to content

Latest commit

 

History

History
197 lines (128 loc) · 4.15 KB

checkbox.md

File metadata and controls

197 lines (128 loc) · 4.15 KB
Raw

Checkbox

Source

Checkboxes allow users to complete tasks that involve making choices such as selecting options. Can be styled as a switch, a visual toggle between two mutually exclusive states — on and off.

Usage

You should have the chayns-components package installed. If that is not the case already, run

yarn add chayns-components

or

npm i chayns-components

After the chayns-components package is installed, you can import the component and use it with React:

import React from 'react'
import { Checkbox } from 'chayns-components';

// ...

<Checkbox {...} />

Props

The Checkbox-component takes the following props:

Name Type Default Required
style { [key: string]: string | number }
className string
labelStyle { [key: string]: string | number }
labelClassName string
label ReactNode | Array<ReactNode>
children ReactNode | Array<ReactNode>
onChange function
toggleButton boolean false
checked boolean
defaultChecked boolean
disabled boolean false
dangerouslySetLabel { __html: string }
stopPropagation boolean false
id number | string

style

style?: { [key: string]: string | number }

A React style object that will be applied to the CheckBox element.

className

className?: string

A classname string that will be applied to the CheckBox element.

labelStyle

labelStyle?: { [key: string]: string | number }

A React style object that will be applied to the label element.

labelClassName

labelClassName?: string

A classname string that will be applied to the label element.

label

label?: ReactNode | Array<ReactNode>

A label that will be shown next to the CheckBox.

children

children?: ReactNode | Array<ReactNode>

A label that will be shown next to the CheckBox.

onChange

onChange?: function

This will be called when the state of the CheckBox changes.

toggleButton

toggleButton?: boolean

Changes the rendering to a switch-/toggle-style.

checked

checked?: boolean

Wether the CheckBox is checked. Makes it a controlled input.

defaultChecked

defaultChecked?: boolean

Wether the CheckBox is checked by default. Do not use it with the checked-prop.

disabled

disabled?: boolean

Disables any interactions with the CheckBox and changes the style to a disabled look.

dangerouslySetLabel

dangerouslySetLabel?: { __html: string }

Set the contents of the label with a raw HTML string.

stopPropagation

stopPropagation?: boolean

Wether to stop propagation of click events.

id

id?: number | string

The HTML id of the input element.