Anatomy
Image is not to scale for informative purposes only
- Radio container
- Border
- 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
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| buttonsWrapperCss | CSS passed to RadioButtons parent element | CSS | ---- | False |
| defaultValue | string & (string | number | readonly string[]) | ---- | False | |
| dir | "ltr" | "rtl" | ---- | False | |
| loop | boolean | ---- | False | |
| name | Shared name of group radios | string | ---- | True |
| onValueChange | (value: string) => void | ---- | False | |
| orientation | "horizontal" | "vertical" | ---- | False | |
| required | boolean | ---- | False | |
| value | string | ---- | False | |
| legend | Legend text labelling entire group | ReactNode | ---- | True |
| disabled | Inputs are disabled, changing appearance and preventing input | boolean | ---- | False |
| error | If there is an error with the fields | boolean | ---- | False |
| css | WPDS 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 |
| errorMessage | Description of error | ReactNode | ---- | False |
| isOutline | Only the radio button's outline is displayed | boolean | false | False |
| variant | Color variants | "cta" | "secondary" | "primary" | primary | False |
RadioButton
| Prop | Description | Type | Default | Required |
|---|---|---|---|---|
| required | boolean | ---- | False | |
| value | underlying value for input | string | ---- | True |
| label | label text displayed next to button | string | ---- | True |
| id | id of input | string | ---- | True |
| asChild | boolean | ---- | False | |
| error | displays error state with colored border | boolean | ---- | False |
| css | WPDS 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 |
| isOutline | boolean | "true" | ({ "@reducedMotion"?: boolean | "true"; "@sm"?: boolean | "true"; "@md"?: boolean | "true"; "@lg"?: boolean | "true"; "@xl"?: boolean | "true"; "@xxl"?: boolean | "true"; "@notSm"?: boolean | "true"; ... 17 more ...; "@initial"?: boolean | "true"; } & { ...; }) | ---- | False | |
| checked | boolean | ---- | False | |
| variant | "cta" | "secondary" | "primary" | ({ "@reducedMotion"?: "cta" | "secondary" | "primary"; "@sm"?: "cta" | "secondary" | "primary"; "@md"?: "cta" | "secondary" | "primary"; "@lg"?: "cta" | "secondary" | "primary"; ... 20 more ...; "@initial"?: "cta" | ... 1 more ... | "primary"; } & { ...; }) | primary | False | |
| isInvalid | boolean | "true" | ({ "@reducedMotion"?: boolean | "true"; "@sm"?: boolean | "true"; "@md"?: boolean | "true"; "@lg"?: boolean | "true"; "@xl"?: boolean | "true"; "@xxl"?: boolean | "true"; "@notSm"?: boolean | "true"; ... 17 more ...; "@initial"?: boolean | "true"; } & { ...; }) | ---- | False |