sp-field-group

NPM

0.44.0

Storybook

View Storybook
Examples API Changelog

Attributes and Properties #

Property Attribute Type Default Description horizontal horizontal boolean false invalid invalid boolean false label label string '' vertical vertical boolean false

Slots #

Name Description default slot the form controls that make up the group help-text default or non-negative help text to associate to your form element negative-help-text negative help text to associate to your form element when `invalid`

0.44.0 (2024-07-15) #

Note: Version bump only for package @spectrum-web-components/field-group

0.43.0 (2024-06-11) #

Note: Version bump only for package @spectrum-web-components/field-group

0.42.5 (2024-05-24) #

Note: Version bump only for package @spectrum-web-components/field-group

0.42.4 (2024-05-14) #

Note: Version bump only for package @spectrum-web-components/field-group

0.42.3 (2024-05-01) #

Note: Version bump only for package @spectrum-web-components/field-group

0.42.2 (2024-04-03) #

Note: Version bump only for package @spectrum-web-components/field-group

0.42.1 (2024-04-02) #

Note: Version bump only for package @spectrum-web-components/field-group

0.42.0 (2024-03-19) #

Features #

  • asset: use core tokens (99e76f4)

0.41.2 (2024-03-05) #

Note: Version bump only for package @spectrum-web-components/field-group

0.41.1 (2024-02-22) #

Note: Version bump only for package @spectrum-web-components/field-group

0.41.0 (2024-02-13) #

Note: Version bump only for package @spectrum-web-components/field-group

0.40.5 (2024-02-05) #

Note: Version bump only for package @spectrum-web-components/field-group

0.40.4 (2024-01-29) #

Note: Version bump only for package @spectrum-web-components/field-group

0.40.3 (2024-01-11) #

Note: Version bump only for package @spectrum-web-components/field-group

0.40.2 (2023-12-18) #

Note: Version bump only for package @spectrum-web-components/field-group

0.40.1 (2023-12-05) #

Note: Version bump only for package @spectrum-web-components/field-group

0.40.0 (2023-11-16) #

Bug Fixes #

  • field-group: apply role when none present (3616199)

0.39.4 (2023-11-02) #

Note: Version bump only for package @spectrum-web-components/field-group

0.39.3 (2023-10-18) #

Note: Version bump only for package @spectrum-web-components/field-group

0.39.2 (2023-10-13) #

Note: Version bump only for package @spectrum-web-components/field-group

0.39.1 (2023-10-06) #

Note: Version bump only for package @spectrum-web-components/field-group

0.39.0 (2023-09-25) #

Note: Version bump only for package @spectrum-web-components/field-group

0.38.0 (2023-09-05) #

Note: Version bump only for package @spectrum-web-components/field-group

0.37.0 (2023-08-18) #

Note: Version bump only for package @spectrum-web-components/field-group

0.36.0 (2023-08-18) #

Note: Version bump only for package @spectrum-web-components/field-group

0.35.0 (2023-07-31) #

Note: Version bump only for package @spectrum-web-components/field-group

0.34.0 (2023-07-11) #

Note: Version bump only for package @spectrum-web-components/field-group

0.33.2 (2023-06-14) #

Note: Version bump only for package @spectrum-web-components/field-group

0.33.0 (2023-06-08) #

Note: Version bump only for package @spectrum-web-components/field-group

0.32.0 (2023-06-01) #

Note: Version bump only for package @spectrum-web-components/field-group

0.31.0 (2023-05-17) #

Note: Version bump only for package @spectrum-web-components/field-group

0.30.0 (2023-05-03) #

Bug Fixes #

  • apply "HelpTextMixin" to form elements (a952447)
  • include the "types" entry in package.json files (b432f59)
  • reduce cycles (66a4efb)
  • update file path access (8898bf7)
  • update latest Spectrum CSS beta releases (d8d3acc)
  • update to latest spectrum-css packages (a5ca19f)

Features #

  • action-button: add action button pattern (03ac00a)
  • add t-shirt sizing to the Radio pattern (fc49343)
  • adopt DNA@7 base Spectrum CSS (e08cafd)
  • field-group: add field-group pattern (f8d265c)
  • field-group: update spectrum css input (b2160a9)
  • field-group: use core tokens (7433e59)
  • include all Dev Mode files in side effects (f70817c)
  • shared pkg versions, devmode define warning, registry-conflicts docs (6e49565)
  • use latest exports specification (a7ecf4b)

0.8.7 (2023-04-24) #

Note: Version bump only for package @spectrum-web-components/field-group

0.8.6 (2023-04-05) #

Note: Version bump only for package @spectrum-web-components/field-group

0.8.5 (2023-03-22) #

Note: Version bump only for package @spectrum-web-components/field-group

0.8.4 (2023-03-08) #

Note: Version bump only for package @spectrum-web-components/field-group

0.8.3 (2023-02-08) #

Note: Version bump only for package @spectrum-web-components/field-group

0.8.2 (2023-01-23) #

Note: Version bump only for package @spectrum-web-components/field-group

0.8.1 (2023-01-09) #

Note: Version bump only for package @spectrum-web-components/field-group

0.8.0 (2022-12-08) #

Features #

  • field-group: use core tokens (7433e59)

0.7.5 (2022-11-21) #

Note: Version bump only for package @spectrum-web-components/field-group

0.7.4 (2022-11-14) #

Note: Version bump only for package @spectrum-web-components/field-group

0.7.3 (2022-10-28) #

Note: Version bump only for package @spectrum-web-components/field-group

0.7.2 (2022-10-10) #

Note: Version bump only for package @spectrum-web-components/field-group

0.7.1 (2022-09-14) #

Note: Version bump only for package @spectrum-web-components/field-group

0.7.0 (2022-08-24) #

Features #

  • add t-shirt sizing to the Radio pattern (fc49343)

0.6.0 (2022-08-09) #

Features #

  • include all Dev Mode files in side effects (f70817c)

0.5.12 (2022-08-04) #

Note: Version bump only for package @spectrum-web-components/field-group

0.5.11 (2022-07-18) #

Note: Version bump only for package @spectrum-web-components/field-group

0.5.10 (2022-06-29) #

Note: Version bump only for package @spectrum-web-components/field-group

0.5.9 (2022-06-07) #

Note: Version bump only for package @spectrum-web-components/field-group

0.5.8 (2022-05-27) #

Note: Version bump only for package @spectrum-web-components/field-group

0.5.7 (2022-05-12) #

Note: Version bump only for package @spectrum-web-components/field-group

0.5.6 (2022-04-21) #

Note: Version bump only for package @spectrum-web-components/field-group

0.5.5 (2022-03-08) #

Note: Version bump only for package @spectrum-web-components/field-group

0.5.4 (2022-03-04) #

Note: Version bump only for package @spectrum-web-components/field-group

0.5.3 (2022-02-22) #

Note: Version bump only for package @spectrum-web-components/field-group

0.5.2 (2022-01-26) #

Note: Version bump only for package @spectrum-web-components/field-group

0.5.1 (2021-12-13) #

Bug Fixes #

  • apply "HelpTextMixin" to form elements (a952447)

0.5.0 (2021-11-08) #

Note: Version bump only for package @spectrum-web-components/field-group

0.4.1 (2021-11-08) #

Note: Version bump only for package @spectrum-web-components/field-group

0.4.0 (2021-11-02) #

Features #

  • adopt DNA@7 base Spectrum CSS (e08cafd)

0.3.9 (2021-09-20) #

Note: Version bump only for package @spectrum-web-components/field-group

0.3.8 (2021-08-24) #

Note: Version bump only for package @spectrum-web-components/field-group

0.3.7 (2021-07-22) #

Note: Version bump only for package @spectrum-web-components/field-group

0.3.6 (2021-06-16) #

Note: Version bump only for package @spectrum-web-components/field-group

0.3.5 (2021-05-12) #

Note: Version bump only for package @spectrum-web-components/field-group

0.3.4 (2021-04-09) #

Note: Version bump only for package @spectrum-web-components/field-group

0.3.3 (2021-03-29) #

Note: Version bump only for package @spectrum-web-components/field-group

0.3.2 (2021-03-22) #

Bug Fixes #

  • reduce cycles (66a4efb)

0.3.1 (2021-03-05) #

Note: Version bump only for package @spectrum-web-components/field-group

0.3.0 (2021-03-04) #

Features #

  • use latest exports specification (a7ecf4b)

0.2.3 (2021-02-11) #

Bug Fixes #

  • update to latest spectrum-css packages (a5ca19f)

0.2.2 (2021-02-02) #

Note: Version bump only for package @spectrum-web-components/field-group

0.2.1 (2021-01-28) #

Note: Version bump only for package @spectrum-web-components/field-group

0.2.0 (2021-01-21) #

Bug Fixes #

  • include the "types" entry in package.json files (b432f59)
  • update file path access (8898bf7)
  • update latest Spectrum CSS beta releases (d8d3acc)

Features #

  • action-button: add action button pattern (03ac00a)
  • field-group: add field-group pattern (f8d265c)
  • field-group: update spectrum css input (b2160a9)

0.1.0 (2021-01-13) #

Bug Fixes #

  • include the "types" entry in package.json files (b432f59)
  • update file path access (8898bf7)
  • update latest Spectrum CSS beta releases (d8d3acc)

Features #

  • action-button: add action button pattern (03ac00a)
  • field-group: add field-group pattern (f8d265c)
  • field-group: update spectrum css input (b2160a9)

Description #

An <sp-field-group> element is used to layout a group of fields, usually <sp-checkbox> elements. It can be leveraged for vertical or horizontal organization of the fields that are supplied as its children.

Usage #

See it on NPM! How big is this package in your project?

yarn add @spectrum-web-components/field-group

Import the side effectful registration of <sp-field-group> via:

import '@spectrum-web-components/field-group/sp-field-group.js';

When looking to leverage the FieldGroup base class as a type and/or for extension purposes, do so via:

import { FieldGroup } from '@spectrum-web-components/field-group';

Example #

<sp-field-label for="horizontal">
    Choose from horizonally placed options
</sp-field-label>
<sp-field-group horizontal id="horizontal">
    <sp-checkbox>Checkbox 1</sp-checkbox>
    <sp-checkbox>Checkbox 2</sp-checkbox>
    <sp-checkbox checked>Checkbox 3</sp-checkbox>
    <sp-checkbox>Checkbox 4</sp-checkbox>
    <sp-checkbox>Checkbox 5</sp-checkbox>
</sp-field-group>

Vertical #

<sp-field-label for="vertical">
    Choose from vertically placed options
</sp-field-label>
<sp-field-group vertical id="vertical">
    <sp-checkbox>Checkbox 1</sp-checkbox>
    <sp-checkbox>Checkbox 2</sp-checkbox>
    <sp-checkbox>Checkbox 3</sp-checkbox>
    <sp-checkbox>Checkbox 4</sp-checkbox>
    <sp-checkbox checked>Checkbox 5</sp-checkbox>
</sp-field-group>

Help text #

Help text can be accessibly associated with an <sp-field-group> element by using the help-text or negative-help-text slots. When using the negative-help-text slot, <sp-field-group> will self manage the presence of this content based on the value of the invalid property on your <sp-field-group> element. Content within the help-text slot will be show by default. When your <sp-field-group> should receive help text based on state outside of the complexity of invalid or not, manage the content addressed to the help-text from above to ensure that it displays the right messaging and possesses the right variant.

Self managed 
<sp-field-group horizontal id="self" label="What are your favorite fruits?">
    <sp-checkbox value="apple">Apple</sp-checkbox>
    <sp-checkbox
        value="not-a-fruit"
        onchange="javascript:this.parentElement.invalid = this.checked"
    >
        Lettuce
    </sp-checkbox>
    <sp-checkbox value="strawberry" checked>Strawberry</sp-checkbox>
    <sp-help-text slot="help-text">One of these is not a fruit.</sp-help-text>
    <sp-help-text slot="negative-help-text" icon>
        Choose actual fruit(s).
    </sp-help-text>
</sp-field-group>
 Managed from above 
<sp-field-label for="above">What are your favorite fruits?</sp-field-label>
<sp-field-group horizontal id="above">
    <sp-checkbox value="apple">Apple</sp-checkbox>
    <sp-checkbox
        value="not-a-fruit"
        onchange="
            const helpText = this.parentElement.querySelector(`[slot='help-text']`);
            helpText.icon = this.checked;
            helpText.textContent = this.checked ? 'Choose actual fruit(s).' : 'One of these is not a fruit.';
            helpText.variant = this.checked ? 'negative' : 'neutral';
        "
    >
        Lettuce
    </sp-checkbox>
    <sp-checkbox value="strawberry" checked>Strawberry</sp-checkbox>
    <sp-help-text slot="help-text">One of these is not a fruit.</sp-help-text>
</sp-field-group>