InputLabel
Introduction
The label used with all HTML inputs, including both the label itself and a hint.
Live demo
- Core
- React
- Rails
CSS custom properties
Use these properties to theme input-label 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-label-text-color | Linked | — | var(--rpf-text-primary) | Label text colour |
--rpf-label-hint-color | Linked | — | var(--rpf-text-secondary) | Hint text colour |
--rpf-label-text-color-disabled | Linked | — | var(--rpf-input-color-disabled) | Disabled label and hint text colour |
--rpf-input-color-disabled | Independent | var(--rpf-grey-500) | — | Shared disabled input colour and the fallback for disabled label text |
Implementation:
- Core Storybook docs
- React Storybook docs
- Rails Lookbook docs