Checkbox

A simple boolean input. Can be combined with other checkboxes to create lists of options.

Examples

Plain Checkbox

A box that displays a checkmark when selected. An indeterminate checkbox indicates that a box is in an incomplete state.

import { Checkbox } from '@curology/ui-components-web/react/Checkbox';

<Checkbox
  size="{sm|md(default)}"
  checked
  indeterminate
/>

With label

A label can (and should!) be added to each checkbox to indicate its purpose. It can also have additional meta text applied beneath.

A checkbox with a label

A checkbox with a label

A checkbox with a label

And some meta text

A checkbox with a label

And some meta text

A checkbox with a label that is really long and goes on and on and on

And STILL has even more meta text wow

A checkbox with a label that is really long and goes on and on and on

And STILL has even more meta text wow

import { Checkbox } from '@curology/ui-components-web/react/Checkbox';

<Checkbox 
  ...
  label="A checkbox with a label"
  meta="And some meta text"
/>

Critical, Warning, Success, and Disabled States

There are four additional states the Checkbox can be in, to indicate danger, warning, success or the inability to be controlled.

import { Checkbox } from '@curology/ui-components-web/react/Checkbox';

<Checkbox
  state="{''(default)|critical|warning|success}"
/>

With children

Nested content can be added below the checkbox. If alwaysShowChildren is true, the child content will display even if the checkbox is unselected.

A checkbox with a label

Child content only visible when checked.

A checkbox with a label

Child content only visible when checked.

A checkbox with a label

And some meta text

Child content always visible.

A checkbox with a label

And some meta text

Child content always visible.

import { Checkbox } from '@curology/ui-components-web/react/Checkbox';

<Checkbox 
  ...
  alwaysShowChildren
/>

Controlled Checkbox

Like all form inputs, a Checkbox can either be uncontrolled, or controlled (by providing a value and onChange listener).

import { Checkbox } from '@curology/ui-components-web/react/Checkbox';

<Checkbox
  size="{sm|md(default)}"
  checked
  indeterminate
  onChange={(evt, checked) => ...}
/>

As a list

A list of checkboxes, complete with a label and helperText at the top, can be displayed by wrapping multiple Checkboxes in a CheckboxGroup.

A list of radio choices

Selected Values: a

A radio button with a label

A radio button with a label

And some meta text

A radio button with a label that is really long and goes on and on and on

And STILL has even more meta text wow

A list of radio choices

Selected Values: a

A radio button with a label

A radio button with a label

And some meta text

A radio button with a label that is really long and goes on and on and on

And STILL has even more meta text wow

import { Checkbox } from '@curology/ui-components-web/react/Checkbox';
import { CheckboxGroup } from '@curology/ui-components-web/react/CheckboxGroup';

<CheckboxGroup
  name="labeled"
  values={['a']}
  label="A list of radio choices"
  helperText="Just pick one"
  onChange={(evt, values) => ...}
>
  <Checkbox value="a" />
  <Checkbox value="b" />
  <Checkbox value="c" />
</CheckboxGroup>

Props

CheckboxProps

Name	Type	Default Value	Required	Description
All attributes of a <input />
alwaysShowChildren	false | true	false	No	Should the children display even if `checked=false`?
indeterminate	false | true	false	No	Show a partially selected checkbox when `checked=true`.
label	ReactNode		No	A string or component to display as a label above the input
meta	ReactNode		No	A string or component to display as meta text beneath the input
onChange	FormControlChangeEventHandler		No	Emit a new value when the input's selected value changes.
size	"md" | "sm"	'md'	No	The size of the field
state	"" | "critical" | "warning" | "success"	''	No	The state of the field
type	"checkbox" | "radio"	checkbox	No	Should this render/behave as a checkbox or radio button?

CheckboxGroupProps

Name	Type	Default Value	Required	Description
All attributes of a <div />
brand	"agency" | "curology"	''	No	The brand of the component.
defaultValue	string | number | readonly string[] | (string | number | readonly string[] | undefined)[]		No	Default value to use the first time the context is created.
disabled	false | true	false	No	Should the field be considered disabled?
fieldClassName	string		No	A className to apply to the field.
fieldProps	Record<string, unknown>		No	Any props to spread onto the field container.
helperText	ReactNode		No	A string or component to display as helper text beneath the input
highlight	ReactNode		No	Highlighted helper text to display at the bottom of the multiline text input
highlightClassName	string		No	A className to apply to the highlight.
id	string	''	No	A unique ID for this form control.
label	ReactNode		No	A string or component to display as a label above the input
name	string	''	No	The name for the radio group.
onChange	(evt: ChangeEvent<HTMLInputElement>, value: (string | number | readonly string[] | undefined)[]) => void		No	Emit a new value when the group's selected values change.
required	false | true	false	No	Is the field required?
resize	false | true	false	No	Enable or disable resizing.
size	"md" | "sm"	'md'	No	The size of the field.
state	"" | "critical" | "warning" | "success"	''	No	The state of the field
type	"number" | "image" | "search" | "button" | "time" | "text" | "color" | "hidden" | string & {} | "submit" | "reset" | "checkbox" | "date" | "datetime-local" | "email" | "file" | "month" | "password" | "radio" | "range" | "tel" | "url" | "week"	'text'	No	The type of the input.
value	string | number | readonly string[] | (string | number | readonly string[] | undefined)[]	''	No	The currently selected value.
values	string | string[]	[]	No	A list of selected values.