Fieldset
Introduction
A Fieldset element to contain a group of checkboxes or radio buttons. The error is displayed below the fieldset.
Live demo
- Core
- React
- Rails
CSS custom properties
Use these properties to theme fieldsets and the choice inputs they contain. 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-fieldset-text-color | Linked | — | var(--rpf-input-color) | Fieldset text colour |
--rpf-input-color | Independent | var(--rpf-text-primary) | — | Shared input colour and the fallback for fieldset text and checked choice inputs |
--rpf-input-color-error | Independent | var(--rpf-alert-error) | — | Border and checked-indicator colour for an error fieldset |
--rpf-label-hint-color | Linked | — | var(--rpf-text-secondary) | Hint text colour |
--rpf-label-text-color | Linked | — | var(--rpf-text-primary) | Label text colour |
--rpf-label-text-color-disabled | Linked | — | var(--rpf-input-color-disabled) | Disabled label text colour |
A fieldset deliberately paints no background. Set the background on its containing surface; --rpf-input-background-color only colours the checkbox and radio controls.
Implementation:
- Core Storybook docs
- React Storybook docs
- Rails Lookbook docs