Examples
Label wraps
You can expand the clickable area of a checkbox so that it spans wider than the checkbox label by adding the isLabelWrapped property. This allows users to select a checkbox by clicking the checkbox itself, the label, or the area between the checkbox and the label.
Checkbox with description
Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP.
Checkbox with description and body
Single-tenant cloud service hosted and managed by Red Hat that offers high-availability enterprise-grade clusters in a virtual private cloud on AWS or GCP.This is where custom content goes.
Props
Checkbox
| Name | Type | Default | Description |
|---|---|---|---|
| idrequired | string | Id of the checkbox. | |
| aria-label | string | Aria-label of the checkbox. | |
| body | React.ReactNode | Body text of the checkbox | |
| checked | boolean | ||
| className | string | '' | Additional classes added to the checkbox wrapper. This wrapper will be div element by default. It will be a label element if isLabelWrapped is true, or it can be overridden by any element specified in the component prop. |
| component | React.ElementType | Sets the checkbox wrapper component to render. Defaults to "div". If set to "label", behaves the same as if isLabelWrapped prop was specified. | |
| description | React.ReactNode | Description text of the checkbox. | |
| inputClassName | string | Additional classes added to the checkbox input. | |
| isChecked | boolean | null | false | Flag to show if the checkbox is checked. If null, the checkbox will be indeterminate (partially checked). |
| isDisabled | boolean | false | Flag to show if the checkbox is disabled. |
| isLabelWrapped | boolean | false | Flag to indicate whether the checkbox wrapper element is a <label> element for the checkbox input. Will not apply if a component prop (with a value other than a "label") is specified. |
| isRequired | boolean | false | Flag to show if the checkbox is required. |
| isValid | boolean | true | Flag to show if the checkbox selection is valid or invalid. |
| label | React.ReactNode | Label text of the checkbox. | |
| labelPosition | 'start' | 'end' | Sets the position of the label. Defaults to 'end' (after the checkbox input). | |
| onChange | (event: React.FormEvent<HTMLInputElement>, checked: boolean) => void | () => {} | A callback for when the checkbox selection changes. |
| ouiaId | number | string | Value to overwrite the randomly generated data-ouia-component-id. | |
| ouiaSafe | boolean | true | Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. |
CSS variables
| Expand or collapse column | Selector | Variable | Value |
|---|
