Checkbox

Checkboxes allow users to select any number of options from a list.

import { Checkbox } from "@nulogy/components";

<Checkbox id="checkbox" labelText="I am a checkbox" />

Variations

Disabled

<Checkbox id="disabled-checkbox" labelText="I am a checkbox" disabled />

Error

<Checkbox id="error-checkbox" labelText="I am a checkbox" error />

Default Checked

<Checkbox id="disabled-checkbox" labelText="I am a checkbox" defaultChecked="true"/>

Indeterminate

<Checkbox labelText="I am an indeterminate checkbox" checked indeterminate />

Guidelines

  • Add labels, errors and default selections with Checkbox Group
  • If there are many items in a list, consider using a "Show all" button

Props

NameTypeDefaultDescription

id

String

null

A unique ID for this input

name

String

undefined

Identified that groups inputs together

defaultChecked

Boolean

false

Makes the field checked by default

disabled

Boolean

false

Marks the field as disabled and disallows user input

error

Boolean

false

Marks the field as invalid and turns red

labelText

String

Required

Label for the input

onChange

Function

null

required

Boolean

false

Makes the field require input before the form will submit

className

String

undefined

className passed to the wrapper

checked

Boolean

false

Whether or not the checkbox has been checked

indeterminate

boolean

undefined

Displays the checkbox in an indeterminate state if checked. You must use the checkbox as a controlled input (give the checked prop a value) when using this prop

value

String

undefined

The value of the checkbox that is submitted with the form. Required when using `indeterminate` checkbox.

Related components