CheckboxInput
Introduction
This is a single checkbox input field. It will sometimes be part of a fieldset.
Note: Make sure to include a label for this input.
Live demo
- Core
- React
- Rails
CSS custom properties
Use these properties to theme checkbox 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-checkbox-checked-background-color | Linked | — | var(--rpf-input-color) | Checked checkbox background colour |
--rpf-input-background-color | Independent | var(--rpf-white) | — | Unchecked checkbox background colour |
--rpf-input-color | Independent | var(--rpf-text-primary) | — | Fallback colour for the checked checkbox background |
--rpf-input-color-disabled | Independent | var(--rpf-grey-500) | — | Disabled label colour and checked checkbox background and border colour |
--rpf-input-color-error | Independent | var(--rpf-alert-error) | — | Checkbox border and checked-background colour in an error state |
--rpf-label-text-color-disabled | Linked | — | var(--rpf-input-color-disabled) | Disabled label text colour |
The checkbox tick remains white and is not themeable, so choose a checked background with sufficient contrast.
Implementation:
- Core Storybook docs
- React Storybook docs
- Rails Lookbook docs