Status
The status of the component
Component checklist
Ready for use!
Repository
A link to the repo where the component lives.
Checkbox Group
gux-form-field-checkbox-group
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| disabled | disabled | Disables the checkboxes in the group. | boolean | false |
| indicatorMark | indicator-mark | Field indicator mark which can show *, (optional) or blank Defaults to required. When set to required, the component will display * for required fields and blank for optional When set to optional, the component will display (optional) for optional and blank for required. | "none" | "optional" | "required" | 'required' |
| required | required | boolean | false |
Slots
| Slot | Description |
|---|---|
| "group-checkbox" | Optional slot |
| "group-error" | Optional slot for error message |
| "group-help" | Optional slot for help message |
| "group-label" | Required slot for label tag |
Dependencies
Depends on
Graph
graph TD;
gux-form-field-checkbox-group-beta --> gux-form-field-label-indicator
gux-form-field-checkbox-group-beta --> gux-icon
style gux-form-field-checkbox-group-beta fill:#f9f,stroke:#333,stroke-width:4pxBuilt with StencilJS
Singular checkbox
gux-form-field-checkbox
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
| hasGroupDisabled | has-group-disabled | boolean | false | |
| hasGroupError | has-group-error | boolean | false | |
| labelPosition | label-position | "beside" | "screenreader" | 'beside' |
Slots
| Slot | Description |
|---|---|
| "error" | Optional slot for error message |
| "help" | Optional slot for help message |
| "input" | Required slot for input tag |
| "label" | Required slot for label tag |
Dependencies
Used by
Depends on
Graph
graph TD;
gux-form-field-checkbox --> gux-icon
gux-all-row-select --> gux-form-field-checkbox
gux-column-manager --> gux-form-field-checkbox
gux-row-select --> gux-form-field-checkbox
style gux-form-field-checkbox fill:#f9f,stroke:#333,stroke-width:4pxBuilt with StencilJS