- React
- HTML

## Examples

### Basic

### Required

### Checked

### Label wrapping input

### Reversed

### Disabled

### With description

### With body

### With description and body

### Standalone input

## Documentation

### Overview

The Check component is provided for use cases outside of forms. If it is used without label text ensure some sort of label for assistive technologies. (for example: `aria-label`)

If you extend this component or modify the styles of this component, then make sure any hover styles defined are applied to the clickable elements, like `<input>` or `<label>` since hover styles are used to convey the clickable target area of an element. To maximize the target area, use the example html where the `<label>` is the wrapping element.

### Accessibility

Attribute | Applied to | Outcome
--- | --- | ---
`disabled` | `.pf-v6-c-check__input` | Indicates that the element is unavailable and removes it from keyboard focus. Required when input is disabled
`required` | `.pf-v6-c-check__input` | Indicates that the element is required.
`aria-describedby` | `.pf-v6-c-check__input` | When using `.pf-v6-c-check__description` make use of this on the input.

### Usage

Class | Applied to | Outcome
--- | --- | ---
`.pf-v6-c-check` | `<div>`, `<label>` | Initiates the check component. Required
`.pf-v6-c-check__input` | `<input type="checkbox">` | Initiates a check input. Required
`.pf-v6-c-check__label` | `<label>`, `<span>` | Initiates a label. Required
`.pf-v6-c-check__label-required` | `<span>` | Initiates a required indicator.
`.pf-v6-c-check__description` | `<span>` | Initiates a check description.
`.pf-v6-c-check__body` | `<span>` | Initiates a check body.
`.pf-m-standalone` | `.pf-v6-c-check` | Modifies the check component for use with a standalone `<input type="checkbox">`. Required when there is no label
`.pf-m-disabled` | `.pf-v6-c-check__label` | Modifies the check component for the disabled state. Required when input is disabled

##
CSS variables