Radio Button

A simple boolean radio button. Unlike a Checkbox, only one RadioButton in a group can be selected at a time.

Examples

Plain Radio Button

A circle that displays an inner dot when selected.

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

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

With label

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

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 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 { RadioButton } from '@curology/ui-components-web/react/RadioButton';

<RadioButton 
  ...
  label="A radio button with a label"
  meta="And some meta text"
/>

Critical, Warning, Success, and Disabled States

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

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

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

With children

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

A radio button with a label

Child content only visible when checked.

A radio button with a label

And some meta text

Child content always visible.

A radio button with a label

Child content only visible when checked.

A radio button with a label

And some meta text

Child content always visible.

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

<RadioButton 
  ...
  alwaysShowChildren
/>

As a list

A list of radio buttons, complete with a label and helperText at the top, can be displayed by wrapping multiple RadioButtons in a RadioButtonGroup.

A list of radio choices

Just pick one

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

Just pick one

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 { RadioButton } from '@curology/ui-components-web/react/RadioButton';
import { RadioButtonGroup } from '@curology/ui-components-web/react/RadioButton/RadioButtonGroup';

<RadioButtonGroup
  name="choice"
  label="A list of radio choices"
  helperText="Just pick one"
>
  <RadioButton value="a" defaultChecked />
  <RadioButton value="b" />
  <RadioButton value="c" />
</RadioButtonGroup>

As a controlled list

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

A list of radio choices

Just pick one

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

Just pick one

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 { RadioButton } from '@curology/ui-components-web/react/RadioButton';
import { RadioButtonGroup } from '@curology/ui-components-web/react/RadioButton/RadioButtonGroup';

<RadioButtonGroup
  ...
  value="a"
  onChange={(evt, value) => ...}
>
  <RadioButton value="a" />
  <RadioButton value="b" />
  <RadioButton value="c" />
</RadioButtonGroup>

Props

RadioButtonProps

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

RadioButtonGroupProps

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	FormControlChangeEventHandler<InputType, string | number | readonly string[] | (string | number | readonly string[] | undefined)[] | undefined> & ((evt: ChangeEvent<...>, value: string | ... 2 more ... | undefined) => void)		No	Emit a new value when the input's selected value changes. 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 & readonly string[] | number & readonly string[] | readonly string[] & string | readonly string[] & number | (string | number | readonly string[] | undefined)[] & string | (string | number | readonly string[] | undefined)[] & number | (string | number | readonly string[] | undefined)[] & readonly string[]	''	No	The currently selected value.