Basic
Requirement
This component requires the Tailwind Forms Plugin to be installed.
Please refer to the Installation guide for instructions.
In your tailwind.config.js:
module.exports = {
// ...
plugins: [
// ...
require('@tailwindcss/forms'),
],
}Description
This component is used to create a checkbox. It can be used alone or in a group.
API
Supports global configuration
View the default configuration for this component. Learn more about global configuration.
import { LuiCheckboxModule } from '@lqvrent-workspace/lqvrent-ui/checkbox';<lui-checkbox-group>
<label lui-checkbox>A</label>
<label lui-checkbox>B</label>
</lui-checkbox-group>[lui-checkbox]
| Property | Description | Type | Default |
|---|---|---|---|
[luiValue] | Value of the checkbox | any | - |
[luiDisabled] | Disable the checkbox | boolean | false |
[luiAutofocus] | Autofocus the checkbox | boolean | false |
[luiIndeterminate] | Whether the checkbox is indeterminate | boolean | false |
[luiName] | Name of the checkbox (accessible by screen readers) | string | - |
[luiCheckboxClass] | Styling class | string | defined in config |
lui-checkbox-group
| Property | Description | Type | Default |
|---|---|---|---|
[luiMode] | Mode of the group | 'default' | 'card' | default |
[luiDisabled] | Disable the group | boolean | false |
(luiChange) | Emit when one of the checkboxes in the group change and return each selected value | EventEmitter<any[]> | - |
More examples
Checkbox group
Vertical checkbox group
Checkbox group inline label
Dynamic checkbox group
Checkbox group changes
Checkbox group card
To customize the style of the card, you must edit the card property in the global configuration.