RadioInput
Introduction
The single radio input, shown here with a label. There are no error styles as radio buttons should be part of a fieldset.
Note Radio buttons do not make sense as stand-alone components and should normally be part of a fieldset.
Live demo
- Core
- React
- Rails
CSS custom properties
Use these properties to theme radio-button colours. Linked properties follow their fallback unless they are set directly. See Theming for how to apply custom properties.
| Property | Type | Default value | Fallback value | Description |
|---|---|---|---|---|
--rpf-input-radio-dot-color | Linked | — | var(--rpf-input-color) | Checked radio dot colour |
--rpf-input-background-color | Independent | var(--rpf-white) | — | Radio background and the gap around the checked dot |
--rpf-input-color | Independent | var(--rpf-text-primary) | — | Fallback colour for the checked radio dot |
--rpf-input-color-disabled | Independent | var(--rpf-grey-500) | — | Disabled label and checked radio dot colour |
--rpf-input-color-error | Independent | var(--rpf-alert-error) | — | Radio border and checked-dot colour in an error state |
--rpf-label-text-color-disabled | Linked | — | var(--rpf-input-color-disabled) | Disabled label text colour |
Implementation:
- Core Storybook docs
- React Storybook docs
- Rails Lookbook docs