FormFieldsets group related FormFields and provide a legend. Grouping FormFields provides contextual clues to users and enhances accessibility.
Examples #
Import Syntax #
import { FormFieldset } from 'mineral-ui/Form';Basic Usage #
Wrap any number of FormFields in a FormFieldset to semantically group them. A brief, descriptive legend is especially useful for users of screen readers and other assistive technologies.
<FormFieldset legend="Login"> <DemoLayout> <FormField label="Email"> <TextInput type="email" /> </FormField> <FormField label="Password"> <TextInput type="password" /> </FormField> </DemoLayout> </FormFieldset>
Disabled #
If you disable a FormFieldset, be sure you also disable all child controls.
<FormFieldset legend="Login" disabled> <DemoLayout> <FormField label="Email"> <TextInput type="email" disabled /> </FormField> <FormField label="Password"> <TextInput type="password" disabled /> </FormField> </DemoLayout> </FormFieldset>
Bidirectionality #
FormFieldsets support right-to-left (RTL) languages.
<div dir="rtl"> <ThemeProvider theme={{ direction: 'rtl' }}> <FormFieldset legend="أسطورة"> <FormField label="مرحبا بالعالم"> <TextInput iconStart={<IconBackspace />} defaultValue="مرحبا بالعالم" /> </FormField> </FormFieldset> </ThemeProvider> </div>
API & Theme #
FormFieldset Props #
The FormFieldset component takes the following React props.
FormFieldset Theme Variables #
These variables can be used as hooks to override this component's
style at either a
local
or global
level. The theme referenced below is whatever theme is available
from props to the instance of this component.
| Variable | Value |
|---|---|
| FormFieldset_borderColor | theme.borderColor |
| FormFieldsetLegend_color | theme.h5_color |
| FormFieldsetLegend_fontSize | theme.h5_fontSize |
| FormFieldsetLegend_fontWeight | theme.h5_fontWeight |
Usage #
When/How to Use #
Wrap groups of related inputs (which themselves should be wrapped in FormFields) in a FormFieldset with a useful legend.
Consider using FormFieldset instead of a heading element to improve accessibility.