<!-- AUTO-GENERATED by packages/components/bin/generate-skill-component-catalog.js. Do not edit by hand. -->

# r-checkbox

Checkboxes allow users to select none, one, or multiple items from a list.

Overall behavior is based on native `<input type="checkbox">`

Example:
```
<r-checkbox name="newsletter" value="subscribe">Subscribe to newsletter</r-checkbox>
<r-checkbox name="terms" value="accepted" required>I accept the terms and conditions</r-checkbox>
<r-checkbox name="promo" value="promo" checked>Receive promotional emails</r-checkbox>
<r-checkbox name="archived" value="archived" disabled>Archived (disabled)</r-checkbox>
```

## class: `RCheckbox`, `r-checkbox`

### Fields

| Name                  | Privacy | Type      | Default | Description                                                                                                                                                                                                              | Inherited From |
| --------------------- | ------- | --------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------- |
| `autofocus`           |         | `boolean` | `false` | Automatically focus the checkbox when the component is mounted. Note: Only one element per page should have autofocus set to true, following browser standard behavior.                                                  |                |
| `checked`             |         | `boolean` |         | Pass initial checked state                                                                                                                                                                                               |                |
| `customErrorMessage`  |         | `string`  |         | Set custom message for `customError` property of a ValidityState object indicating whether the element's custom validity message has been set to a non-empty string by calling the element's setCustomValidity() method. |                |
| `disabled`            |         | `boolean` |         | Prevent user interaction and apply disabled style                                                                                                                                                                        |                |
| `error`               |         | `string`  |         | Custom validation error message                                                                                                                                                                                          |                |
| `form`                |         | `string`  |         | Specifies the `id` of the `<form>` to which the element belongs                                                                                                                                                          |                |
| `indeterminate`       |         | `boolean` |         | Visually present checkbox in indeterminate state (neither checked nor unchecked)                                                                                                                                         |                |
| `invalid`             |         | `boolean` |         | Indicate that validation has failed                                                                                                                                                                                      |                |
| `name`                |         | `string`  |         | Name of element (data) within a form                                                                                                                                                                                     |                |
| `novalidate`          |         | `boolean` |         | Specifies if element must be ignored during validation of the form elements                                                                                                                                              |                |
| `required`            |         | `boolean` |         | Specifies if checkbox must be checked                                                                                                                                                                                    |                |
| `valid`               |         | `boolean` |         | Indicate that validation is successful                                                                                                                                                                                   |                |
| `value`               |         | `string`  |         | Value of element data within a form                                                                                                                                                                                      |                |
| `valueMissingMessage` |         | `string`  |         | Set custom message for `valueMissing` property of a ValidityState object (set by `required`) within Constrain Validation API                                                                                             |                |

### Methods

| Name                 | Privacy | Description                                                                                                                                                                                                                                                                    | Parameters        | Return                                         | Inherited From |
| -------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------- | ---------------------------------------------- | -------------- |
| `check`              |         | Checks the checkbox element.                                                                                                                                                                                                                                                   |                   | `Promise<void>`                                |                |
| `checkValidity`      |         | Validates the checkbox without triggering UI and returns a boolean indicating its validity.                                                                                                                                                                                    |                   | `Promise<boolean>`                             |                |
| `clearIndeterminate` |         | Sets the indeterminate state of the checkbox element.                                                                                                                                                                                                                          |                   | `Promise<void>`                                |                |
| `getValidityState`   |         | Asynchronously retrieves the validity state of the checkbox.<br><br>This method updates the internal validity state and message by calling `getValidityStateData`<br>with the native element, and then returns an object containing the current validity state and message. |                   | `Promise<{ state: string; message: string; }>` |                |
| `setBlur`            |         | Removes focus from the checkbox element.                                                                                                                                                                                                                                       |                   | `Promise<void>`                                |                |
| `setCustomValidity`  |         | Validates an element, displays provided message in case value is invalid.                                                                                                                                                                                                      | `message: string` | `Promise<void>`                                |                |
| `setFocus`           |         | Sets focus on the checkbox element.                                                                                                                                                                                                                                            |                   | `Promise<void>`                                |                |
| `setIndeterminate`   |         | Sets the indeterminate state of the checkbox element.                                                                                                                                                                                                                          |                   | `Promise<void>`                                |                |
| `toggleChecked`      |         | Toggles the checked state of the checkbox element.                                                                                                                                                                                                                             |                   | `Promise<void>`                                |                |
| `uncheck`            |         | Unchecks the checkbox element.                                                                                                                                                                                                                                                 |                   | `Promise<void>`                                |                |

### Events

| Name        | Type                                                                            | Description                                                                                                                             | Inherited From |
| ----------- | ------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `rChange`   | `CustomEvent<{ element: HTMLRCheckboxElement; value: any; checked: boolean; }>` | Emit custom `rChange` event when checkbox onChange event emitted.<br>Emitted `event.details` contain checkbox value and checked state. |                |
| `rReset`    | `CustomEvent<{ element: HTMLRCheckboxElement; value: any; checked: boolean; }>` | Emits `rReset` when component was reset to initial state by form reset                                                                  |                |
| `rValidate` | `CustomEvent<{ state: string; message: string; }>`                              | Emits event after each validation                                                                                                       |                |

### Attributes

| Name                    | Field               | Inherited From |
| ----------------------- | ------------------- | -------------- |
| `autofocus`             | autofocus           |                |
| `checked`               | checked             |                |
| `custom-error-message`  | customErrorMessage  |                |
| `disabled`              | disabled            |                |
| `error`                 | error               |                |
| `form`                  | form                |                |
| `indeterminate`         | indeterminate       |                |
| `invalid`               | invalid             |                |
| `name`                  | name                |                |
| `novalidate`            | novalidate          |                |
| `required`              | required            |                |
| `valid`                 | valid               |                |
| `value`                 | value               |                |
| `value-missing-message` | valueMissingMessage |                |

### Slots

| Name | Description         |
| ---- | ------------------- |
|      | Checkbox label text |

<hr/>

## Exports

| Kind                        | Name         | Declaration | Module | Package |
| --------------------------- | ------------ | ----------- | ------ | ------- |
| `js`                        | `RCheckbox`  | RCheckbox   |        |         |
| `custom-element-definition` | `r-checkbox` | RCheckbox   |        |         |