Form
Form Group3.0
Form group act as a container for related radio buttons and other anchor components, providing a shared label and context while enforcing mutually exclusive selection.
Ads by Tryg Careers
Installation
npm i @tryg/ui-libraryUsage
You are free to use the Form Group component with Checkbox or Radio, etc. The purpose is to provide a simple component that allows you to group form elements and display a single label and error message for the group.
Individual only imports the desired component, and only needs to be included once within the application. Which is beneficial to keep the application size small.
<script type="module">
import { defineCustomElement } from '@tryg/ui-library/dist/components/anchor-form-group';
defineCustomElement();
</script>
<anchor-form-group>
<anchor-checkbox input-id="button-1" name="button-1" value="First">First checkbox</anchor-checkbox>
<anchor-checkbox input-id="button-2" name="button-2" value="Second">Second checkbox</anchor-checkbox>
</anchor-form-group>Global only needs to be defined once in the application, but it will import all components even the ones that are not in use..
<script type="module">
import { defineCustomElements } from '@tryg/ui-library/dist/loader';
defineCustomElements();
</script>
<anchor-form-group>
<anchor-checkbox input-id="button-1" name="button-1" value="First">First checkbox</anchor-checkbox>
<anchor-checkbox input-id="button-2" name="button-2" value="Second">Second checkbox</anchor-checkbox>
</anchor-form-group>With Checkboxes
<anchor-form-group>
<anchor-checkbox input-id="button-1" name="button-1" value="First">First checkbox</anchor-checkbox>
<anchor-checkbox input-id="button-2" name="button-2" value="Second">Second checkbox</anchor-checkbox>
</anchor-form-group>With a Custom Label Slot Checkboxes
<anchor-form-group id="form-group" error>
<span slot="label">This is a Form Group</span>
<anchor-checkbox input-id="button-1" name="button-1" value="First">First checkbox</anchor-checkbox>
<anchor-checkbox input-id="button-2" name="button-2" value="Second">Second checkbox</anchor-checkbox>
</anchor-form-group>Checkbox with Error
<anchor-form-group id="form-group" error>
<anchor-checkbox input-id="button-1" name="button-1" value="First">First checkbox</anchor-checkbox>
<anchor-checkbox input-id="button-2" name="button-2" value="Second">Second checkbox</anchor-checkbox>
<span slot="error-msg">Please correct the error</span>
</anchor-form-group>With Radio Buttons and Descriptions
<anchor-form-group id="form-group" label="Group name" description="Assistive text of whole group">
<anchor-radio id="r1" name="test_group" value="value1" description="Assistive text">Radio label</anchor-radio>
<anchor-radio id="r2" name="test_group" value="value2" description="Assistive text">Radio label</anchor-radio>
</anchor-form-group>With Radio Buttons with error
<anchor-form-group id="form-group" label="Group name" description="Assistive text of whole group" errorProp="Error messages">
<anchor-radio id="r1" name="test_group" value="value1" description="Assistive text">Radio label</anchor-radio>
<anchor-radio id="r2" name="test_group" value="value2" description="Assistive text">Radio label</anchor-radio>
</anchor-form-group>Slots
- default: The main container for nested form controls (like radio or checkbox), handling their flex layout, alignment, and gap spacing.
- label: An alternative to the label property, allowing you to pass custom HTML or stylized text into the group's main legend/title.
- error-msg: Slot for inserting a custom HTML error message, replacing the standard string-based errorProp when complex error formatting or links are needed.
Accessibility
- Built with a native HTML
<input>element. - Keyboard focus management and cross browser normalization.
- Keyboard event support for Tab and Space keys.
API
anchor-form-group
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
background | background | Toggles a distinct background style for the form group. Useful when placing the component on non-white or contrasting surfaces. | boolean | false |
description | description | Assistive or secondary text that provides more context about the group. Renders directly below the main label. | string | undefined |
errorProp | error-prop | A string-based error message. Passing a value here will automatically render the component in an error state. | string | '' |
label | label | The main title or legend text for the form group. | string | undefined |
Slots
| Slot | Description |
|---|---|
"default" | Default slot for the form controls (e.g., anchor-radio, anchor-checkbox). |
"error-msg" | Slot for inserting a custom HTML error message. |
"label" | Slot for the main title or legend text (acts as an alternative to the label prop). |
CSS Custom Properties
| Name | Description |
|---|---|
--flex-direction | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--flex-gap | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
--form-group-description-font-weight | Sets the font weight for the description text. |
--form-group-flex-direction | Set the flex direction of the |
--form-group-flex-gap | Set the flex gap of the |
--form-group-label-font-weight | Sets the font weight for the main label text. |
--form-group-padding | Set the padding of the |
--form-group-text-color | Sets the color for the main label and description text. |
--form-group-text-line-height | Sets the line height for the main label and description text. |
--form-group-text-size | Sets the font size for the main label and description text. |
--from-group-error-width | Sets the maximum width of the error message container. |
--padding | DEPRECATED: kept for backwards compatibility, but will be removed by April 2024 |
Dependencies
Depends on
Graph
graph TD;
anchor-form-group --> anchor-icon
style anchor-form-group fill:#f9f,stroke:#333,stroke-width:4pxBuilt with StencilJS
| Anchor version | Status | Notes |
|---|---|---|
| 3.0 | Ready for Implementation | This component is in sync with Figma. |