Fieldset
When to use this component
The fieldset component is used to wrap multiple form input components to provide context to the contained inputs via a <legend>
tag.
How to use this component
Generally speaking you should not need to
call
onsFieldset
yourself as it is already called from within form input components. However if you need to create a pattern or component that requires a fieldset or you can use
nunjucks' call functionality
onsFieldset
.
Legend as page/question title
When a fieldset is on a page such as a question page, it’s quite possible that the page heading (h1
) is the same as what the legend needs to be.
A quick way to avoid visual repetition of the same text is to add the utility class .ons-u-vh
to visually hide the legend. This doesn’t avoid repetition for screen reader users however.
We recommend wrapping the h1
inside the legend. There are two options for doing this:
With the question macro
- When using the question macro include the parameter
"legendIsQuestionTitle": true
inside theonsQuestion
configuration. - Include
"dontWrap": true
in the configuration of the input you are using. - Do not use the
legend
andlegendClasses
parameters on the input being used.
Without the question macro
- Only include the parameter
"legendIsQuestionTitle": true
in the configuration of the input you are using. - Do not use the
legendClasses
parameters.
Configuration
Name | Type | Required | Description |
---|---|---|---|
id | string | true | The id of the fieldset |
classes | string | false | Classes to apply to the fieldset |
legend | string | true | Text for the legend |
legendClasses | string | false | Classes to apply to the legend element |
legendIsQuestionTitle | boolean | false | Creates a h1 inside the legend |
description | string | false | Description for the fieldset |
attributes | object | false | HTML attributes (for example, data attributes) to add to the fieldset |
error | Error (ref) |
false | Configuration for validation errors |
Help improve this component
Let us know how we could improve this component or share your user research findings. Discuss the ‘Fieldset’ component on GitHub