Skip to main content
Design system

Radio Group

Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.

Bundle size: 18.13 kB
Install:
npm install @washingtonpost/wpds-ui-kit
|Copy
Usage:
import { RadioGroup } from "@washingtonpost/wpds-ui-kit"
|Copy
Source:  View on Github

Anatomy

Image is not to scale for informative purposes only

  1. Radio container
  2. Border
  3. Filled container

Options

Variants

There are three variants primary secondary and cta


Options

isOutline

Default value

Radio buttons can be preselected or not depending on the situation.

Orientation

Radio groups can be either horizontal or vertical. By default, radio groups are vertical.


Behaviors

Disabled

Focus

Error

Text Overflow


Guidance

When error should be shown

Error should only occur if the options were not pre-selected and user tries to continue without selecting an option. Required radio groups should be indicated in the label with a * in the error token color. Suplementary error message should be shown below the group.

Required

When radio button selection is required it should be reflected in the fieldset label.

Avoid using radio buttons for a binary choice

The toggle or checkbox is most often used for settings and allows the user to choose between yes/no options or on/off.


API Reference

RadioGroup

PropDescriptionTypeDefaultRequired
defaultValue
enum
string & (string | number | readonly string[])
----False
dir
enum
ltr | rtl
----False
loop
enum
boolean
----False
nameShared name of group radios
string
----
True
onValueChange
(value: string) => void
----False
orientation
enum
horizontal | vertical
----False
required
enum
boolean
----False
value
string
----False
legendLegend text labelling entire group
enum
ReactNode
----
True
disabledInputs are disabled, changing appearance and preventing input
enum
boolean
----False
cssWPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.
CSS
----False
errorIf there is an error with the fields
enum
boolean
----False
errorMessageDescription of error
enum
ReactNode
----False
isOutlineOnly the radio button's outline is displayed
enum
boolean
false False
variantColor variants
enum
primary | secondary | cta
primary False

RadioButton

PropDescriptionTypeDefaultRequired
required
enum
boolean
----False
valueunderlying value for input
string
----
True
labellabel text displayed next to button
string
----
True
idid of input
string
----
True
asChild
enum
boolean
----False
cssWPDS provides a css prop for overriding styles easily. It’s like the style attribute, but it supports tokens, media queries, nesting and token-aware values. All WPDS Components include a css prop. Use it to pass in overrides.
CSS
----False
errordisplays error state with colored border
enum
boolean
----False
isOutline
enum
boolean | true
----False
checked
enum
boolean
----False
variant
enum
primary | secondary | cta
primary False
isInvalid
enum
boolean | true
----False