Form Group3.0
Form group acts 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/vue-ui-libraryUsage
You are free to use the Form Group component with Checkbox, 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.
Install the component library as a Vue plugin. This globally registers all Anchor components.
import { createApp } from 'vue';
import { ComponentLibrary } from '@tryg/vue-ui-library';
import App from './App.vue';
const app = createApp(App);
app.use(ComponentLibrary);
app.mount('#app');<template>
<anchor-form-group>
<anchor-checkbox input-id="button-1" name="button-1" value="First" label="First checkbox"></anchor-checkbox>
<anchor-checkbox input-id="button-2" name="button-2" value="Second" label="Second checkbox"></anchor-checkbox>
</anchor-form-group>
</template>Import only the components you need for optimal bundle size.
<script setup>
import { AnchorFormGroup, AnchorCheckbox } from '@tryg/vue-ui-library';
</script>
<template>
<anchor-form-group>
<anchor-checkbox input-id="button-1" name="button-1" value="First" label="First checkbox"></anchor-checkbox>
<anchor-checkbox input-id="button-2" name="button-2" value="Second" label="Second checkbox"></anchor-checkbox>
</anchor-form-group>
</template>With Checkboxes
<template>
<anchor-form-group>
<anchor-checkbox input-id="button-1" name="button-1" value="First" label="First checkbox"></anchor-checkbox>
<anchor-checkbox input-id="button-2" name="button-2" value="Second" label="Second checkbox"></anchor-checkbox>
</anchor-form-group>
</template>With a Custom Label Slot
<template>
<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" label="First checkbox"></anchor-checkbox>
<anchor-checkbox input-id="button-2" name="button-2" value="Second" label="Second checkbox"></anchor-checkbox>
</anchor-form-group>
</template>Checkbox with Error
<template>
<anchor-form-group id="form-group" error>
<anchor-checkbox input-id="button-1" name="button-1" value="First" label="First checkbox"></anchor-checkbox>
<anchor-checkbox input-id="button-2" name="button-2" value="Second" label="Second checkbox"></anchor-checkbox>
<span slot="error-msg">Please correct the error</span>
</anchor-form-group>
</template>With Radio Buttons and Descriptions
<template>
<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" label="Radio label"></anchor-radio>
<anchor-radio id="r2" name="test_group" value="value2" description="Assistive text" label="Radio label"></anchor-radio>
</anchor-form-group>
</template>With Radio Buttons with Error
<template>
<anchor-form-group id="form-group" label="Group name" description="Assistive text of whole group" error-prop="Error messages">
<anchor-radio id="r1" name="test_group" value="value1" description="Assistive text" label="Radio label"></anchor-radio>
<anchor-radio id="r2" name="test_group" value="value2" description="Assistive text" label="Radio label"></anchor-radio>
</anchor-form-group>
</template>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.
CSS variables
The following CSS custom properties are exposed:
| Variable | Description |
|---|---|
--form-group-description-font-weight | Sets the font weight for the description text |
--form-group-flex-direction | Set the flex direction of the <anchor-form-group> |
--form-group-flex-gap | Set the flex gap of the <anchor-form-group> |
--form-group-label-font-weight | Sets the font weight for the main label text |
--form-group-padding | Set the padding of the <anchor-form-group> |
--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 |
Accessibility
- Built with a native HTML
<fieldset>and<legend>elements. - 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. |