# auro-checkbox-group The auro-checkbox-group element is a wrapper for auro-checkbox element. ## Properties | Property | Attribute | Type | Default | Description | |---------------------------------|---------------------------------|-----------|-------------|--------------------------------------------------| | [disabled](#disabled) | `disabled` | `boolean` | "undefined" | | | [error](#error) | `error` | `String` | | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. | | [horizontal](#horizontal) | `horizontal` | `Boolean` | false | If set, checkboxes will be aligned horizontally. | | [noValidate](#noValidate) | `noValidate` | `Boolean` | | If set, disables auto-validation on blur. | | [required](#required) | `required` | `Boolean` | false | Populates the `required` attribute on the element. Used for client-side validation. | | [setCustomValidity](#setCustomValidity) | `setCustomValidity` | `String` | | Sets a custom help text message to display for all validityStates. | | [setCustomValidityCustomError](#setCustomValidityCustomError) | `setCustomValidityCustomError` | `String` | | Custom help text message to display when validity = `customError`. | | [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `String` | | Custom help text message to display when validity = `valueMissing`. | | [validity](#validity) | `validity` | `String` | "undefined" | Specifies the `validityState` this element is in. | | [value](#value) | `value` | `array` | "undefined" | | ## Events | Event | Type | Description | |-----------------------------|--------------------|--------------------------------------------------| | `auroFormElement-validated` | | Notifies that the `validity` and `errorMessage` values have changed. | | [input](#input) | `CustomEvent` | | ## Slots | Name | Description | |-----------------|-------------------------------------------------| | [helpText](#helpText) | Allows for the helper text to be overridden. | | [legend](#legend) | Allows for the legend to be overridden. | | [optionalLabel](#optionalLabel) | Allows for the optional label to be overridden. | # auro-checkbox Custom element for the purpose of allowing users to select one or more options of a limited number of choices. ## Properties | Property | Attribute | Type | Default | Description | |------------|------------|-----------|---------|--------------------------------------------------| | [checked](#checked) | `checked` | `Boolean` | false | If set to true, the checkbox will be filled with a checkmark. | | [disabled](#disabled) | `disabled` | `Boolean` | false | If set to true, the checkbox will not be clickable. | | [error](#error) | `error` | `Boolean` | false | If set to true, sets an error state on the checkbox. | | [id](#id) | `id` | `String` | | Sets the individual `id` per element. | | [name](#name) | `name` | `String` | | Accepts any string, `DOMString` representing the value of the input. | | [value](#value) | `value` | `String` | | Sets the element's input value. | ## Methods | Method | Type | |----------------|----------------------| | [handleChange](#handleChange) | `(event: any): void` | | [handleInput](#handleInput) | `(event: any): void` | ## Events | Event | Type | |-------------------------|--------------------| | `auroCheckbox-focusin` | `CustomEvent` | | `auroCheckbox-focusout` | `CustomEvent` | | `auroCheckbox-input` | `CustomEvent` | ## CSS Shadow Parts | Part | Description | |------------------|-------------------------------------------| | [checkbox](#checkbox) | apply css to a specific checkbox. | | `checkbox-input` | apply css to a specific checkbox's input. | | `checkbox-label` | apply css to a specific checkbox's label. | ## API Examples ### Basic
Form label goes here Checkbox option Checkbox option Checkbox option Checkbox option
See code ```html Form label goes here Checkbox option Checkbox option Checkbox option Checkbox option ``` ### Disabled Use the `disabled` attribute to disable individual `` elements or the entire ``. #### Disabled Group The `disabled` attribute used to disable the entire ``.
Form label goes here Disabled checkbox option Disabled checkbox option Disabled checkbox option Disabled checkbox option
See code ```html Form label goes here Disabled checkbox option Disabled checkbox option Disabled checkbox option Disabled checkbox option ``` #### Disabled Checkbox within Group The `disabled` attribute used to disable a single `` element.
Form label goes here Checkbox option Disabled checkbox option Disabled checkbox option Checkbox option
See code ```html Form label goes here Checkbox option Disabled checkbox option Disabled checkbox option Checkbox option ``` ### Form Validation In the `auro-checkbox-group` element, the `required` and `error` states are the tqo possible validation states. It should be noted that form validation is only supported within an `auro-checkbox-group` element. In order to support validation on a single `auro-checkbox` element, it must be wrapped in an `auro-checkbox-group`. #### Required When present, the `required` attribute specifies that at least one or more `` elements within the `` must be checked.
Form label goes here Checkbox option Checkbox option Checkbox option Checkbox option
See code ```html Form label goes here Checkbox option Checkbox option Checkbox option Checkbox option ``` #### Error The `error` attribute used to set error state on the entire ``. If using the `error` attribute on an ``, a string with the error message needs to be passed along with the attribute.
Form label goes here Error checkbox option Error checkbox option Error checkbox option Error checkbox option
See code ```html Form label goes here Error checkbox option Error checkbox option Error checkbox option Error checkbox option ``` ### Theme Support The component may be restyled using the following code sample and changing the values of the following token(s). ```scss @import "./../node_modules/@aurodesignsystem/design-tokens/dist/tokens/SCSSVariables"; :host { --ds-auro-checkbox-border-color: var(--ds-color-border-primary-default, #{$ds-color-border-primary-default}); --ds-auro-checkbox-checkmark-color: var(--ds-color-icon-emphasis-inverse, #{$ds-color-icon-emphasis-inverse}); --ds-auro-checkbox-container-color: var(--ds-color-container-primary-default, #{$ds-color-container-primary-default}); --ds-auro-checkbox-label-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default}); --ds-auro-checkbox-outline-color: transparent; --ds-auro-checkbox-group-helptext-color: var(--ds-color-text-secondary-default, #{$ds-color-text-secondary-default}); --ds-auro-checkbox-group-text-color: var(--ds-color-text-primary-default, #{$ds-color-text-primary-default}); } ```