Toggle

A simple boolean toggle.

Examples

Plain Toggle

An on/off switch. Available in two sizes.

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

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

As Radio Button

A Toggle can also function like a radio button, allowing only one toggle with a matching name to be selected at a time.

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

<Toggle 
  ...
  name="some-name" 
  type="radio" 
/>

With label

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

A toggle with a label

A toggle with a label

A toggle with a label

And some meta text

A toggle with a label

And some meta text

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

And STILL has even more meta text wow

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

And STILL has even more meta text wow

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

<Toggle 
  ...
  label="A toggle with a label"
  meta="And some meta text"
/>

Critical, Warning, Success, and Disabled States

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

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

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

Controlled Toggle

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

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

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

As a list

A list of toggles, complete with a label and helperText at the top, can be displayed by wrapping multiple Toggles in a ToggleGroup.

A list of toggle choices

Just pick one

A toggle with a label

A toggle with a label

And some meta text

A toggle 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 toggle choices

Just pick one

A toggle with a label

A toggle with a label

And some meta text

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

And STILL has even more meta text wow

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

<ToggleGroup
  name="choice"
  label="A list of toggle choices"
  helperText="Just pick one"
>
  <Toggle value="a" defaultChecked />
  <Toggle value="b" />
  <Toggle value="c" />
</ToggleGroup>

As a controlled list

Often, a single Toggle doesn't have much use, so the best way to utilize a Toggle is to group it with others inside a ToggleGroup. This group exposes and accepts the selected value with onChange and value.

A list of toggle choices

Selected Values: a

A toggle with a label

A toggle with a label

And some meta text

A toggle 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 toggle choices

Selected Values: a

A toggle with a label

A toggle with a label

And some meta text

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

And STILL has even more meta text wow

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

<ToggleGroup
  ...
  values={['a']}
  onChange={(evt, values) => ...}
>
  <Toggle value="a" />
  <Toggle value="b" />
  <Toggle value="c" />
</ToggleGroup>

As a controlled radio list

When passing a type of radio, the list of toggles will only allow one value selected at a time.

A list of toggle choices

Selected Value: a

A toggle with a label

A toggle with a label

And some meta text

A toggle 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 toggle choices

Selected Value: a

A toggle with a label

A toggle with a label

And some meta text

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

And STILL has even more meta text wow

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

<ToggleGroup
  ...
  type="radio"
  value="a"
  onChange={(evt, value) => ...}
>
  <Toggle value="a" />
  <Toggle value="b" />
  <Toggle value="c" />
</ToggleGroup>

Props

ToggleProps

Name	Type	Default Value	Required	Description
All attributes of a <input />
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?

ToggleGroupProps

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	OnChangeSingle | OnChangeMultiple		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	"checkbox" | "radio"	checkbox	No	Should this render/behave as a checkbox or radio button?
value	string | number | readonly string[]		No	The currently selected value. Don't allow value when dealing with a checkbox.
values	(string | number | readonly string[] | undefined)[]	[]	No	Don't allow values when dealing with a radio. A list of selected values.