# Checkbox `` is a [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) for the purpose of allowing users to select one or more options of a limited number of choices. ## auro-checkbox use cases The `` element should be used in situations where users may: * Be filling out a form * Need to select one or more options ## Additional Information ## Example(s) ### Default
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 ``` #### Required Group 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 Use the `error` attribute to force an error state on the element. #### Checkbox Group with 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 ``` ### Horizontal Group Using the `horizontal` attribute will render the checkbox options on a horizontal line.
Form label goes here Yes No Maybe
See code ```html Form label goes here Yes No Maybe ``` ### Horizontal Group Limitation Using the `horizontal` attribute has a limit of 3 options. Beyond three, options will be listed in vertically.
Form label goes here Yes No Maybe Not Sure
See code ```html Form label goes here Yes No Maybe Not Sure ``` ## Recommended Use and Version Control There are two important parts of every Auro component. The class and the custom element. The class is exported and then used as part of defining the Web Component. When importing this component as described in the install section, the class is imported and the `auro-checkbox` custom element is defined automatically. To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `register(name)` method on the component class and pass in a unique name. ```js import { AuroCheckbox } from './src/auro-checkbox.js'; import { AuroCheckboxGroup } from './src/auro-checkbox-group.js'; AuroCheckbox.register('custom-checkbox'); AuroCheckboxGroup.register('custom-checkbox-group'); ``` This will create a new custom element that you can use in your HTML that will function identically to the `` element.
Form label goes here Custom checkbox option Custom checkbox option Custom checkbox option Custom checkbox option
See code ```html Form label goes here Custom checkbox option Custom checkbox option Custom checkbox option Custom checkbox option ```