A container for grouping checkbox input items with a shared legend and optional field notes. `ed-checkbox-field` wraps one or more `ed-checkbox-field-item` children in a fieldset with a legend. It provides a semantic grouping for related checkbox options, supporting field notes, validation states, and accessibility features. Individual checkbox state is managed by child items. Use this component for: - Groups of related checkbox options (multiple selections allowed) - Forms that need semantic grouping with a legend for accessibility - Validation feedback via error/success states and field notes - Dark background support via inverted variant The component manages the fieldset legend and field note display. Child items (ed-checkbox-field-item) handle individual checkbox rendering, state, and events. Validation states (error/success) are reflected visually on the container.
| Name | Type | Default | Description |
|---|---|---|---|
isError |
Boolean |
boolean |
A container for grouping checkbox input items with a shared legend and optional field notes. `ed-checkbox-field` wraps one or more `ed-checkbox-field-item` children in a fieldset with a legend. It provides a semantic grouping for related checkbox options, supporting field notes, validation states, and accessibility features. Individual checkbox state is managed by child items. Use this component for: - Groups of related checkbox options (multiple selections allowed) - Forms that need semantic grouping with a legend for accessibility - Validation feedback via error/success states and field notes - Dark background support via inverted variant The component manages the fieldset legend and field note display. Child items (ed-checkbox-field-item) handle individual checkbox rendering, state, and events. Validation states (error/success) are reflected visually on the container. / export class EdCheckboxField extends EdElement { static get styles() { return unsafeCSS(styles.toString()); } /** Error switch |
isSuccess |
Boolean |
boolean |
Success switch |
readOnly |
Boolean |
boolean |
value attribute |
disabled |
Boolean |
boolean |
disabled attribute |
fieldId |
String |
string |
Id |
name |
String |
string |
Name attribute |
checked |
Boolean |
boolean |
Checked property |
fieldNote |
String |
any |
Description or Error message for the field |
required |
Boolean |
boolean |
Required attribute |
hideLegend |
Boolean |
boolean |
Visibly hide the legend 1) Removes the legend from visual users but can still be read by assistive technology |
optionalLabel |
String |
string = '(optional)' |
Optional label to appear after label text |
iconName |
String |
string |
Icon to display in field note |
inverted |
Boolean |
boolean |
Inverted variant 1) Used for dark backgrounds |
ariaDescribedBy |
String |
string |
aria-describedby attribute property |
label |
String |
string = 'Label' |
The form field's label |
| Name | Description |
|---|---|
- |
Should contain one or more `ed-checkbox-field-item` children |
Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.
packages/eddie-web-components/components/checkbox-field/checkbox-field.ts