diff --git a/packages/checkbox-group/README.md b/packages/checkbox-group/README.md index 1e3f1b3fc..23ba3451d 100644 --- a/packages/checkbox-group/README.md +++ b/packages/checkbox-group/README.md @@ -183,3 +183,29 @@ export const validationAdvanced = () => { `; }; ``` + +### Help text + +You can add help text on each checkbox with `help-text` attribute on the ``. + +```js preview-story +export const helpText = () => html` + + + + + +`; +``` diff --git a/packages/form-core/src/choice-group/ChoiceInputMixin.js b/packages/form-core/src/choice-group/ChoiceInputMixin.js index a03986c98..a659c2468 100644 --- a/packages/form-core/src/choice-group/ChoiceInputMixin.js +++ b/packages/form-core/src/choice-group/ChoiceInputMixin.js @@ -92,6 +92,7 @@ export const ChoiceInputMixin = superclass => css` :host { display: flex; + flex-wrap: wrap; } :host([hidden]) { @@ -101,6 +102,10 @@ export const ChoiceInputMixin = superclass => .choice-field__graphic-container { display: none; } + .choice-field__help-text { + display: block; + flex-basis: 100%; + } `, ]; } @@ -118,6 +123,9 @@ export const ChoiceInputMixin = superclass =>
+ + + `; } diff --git a/packages/radio-group/README.md b/packages/radio-group/README.md index f5e86da88..d26d73f06 100644 --- a/packages/radio-group/README.md +++ b/packages/radio-group/README.md @@ -180,3 +180,29 @@ export const validateItem = () => { `; }; ``` + +### Help text + +You can add help text on each checkbox with `help-text` attribute on the ``. + +```js preview-story +export const helpText = () => html` + + + + + +`; +```