FormFieldDivider separates FormFields to group form inputs.
FormFieldDividers help your users grok forms with several inputs by hinting at related fields, without explicitly adding a legend.
Examples #
Import Syntax #
import { FormFieldDivider } from 'mineral-ui/Form';Basic Usage #
Use a FormFieldDivider to create implicit groups of FormFields. For more semantic grouping, use a FormFieldset.
<DemoLayout> <FormField label="Old Password"> <TextInput type="password" /> </FormField> <FormFieldDivider /> <FormField label="New Password"> <TextInput type="password" /> </FormField> <FormField label="Repeat New Password"> <TextInput type="password" /> </FormField> </DemoLayout>
API & Theme #
FormFieldDivider Props #
The FormFieldDivider component takes the following React props.
Note
FormFieldDivider does not have properties of its own. Undocumented properties will be applied to the root element.FormFieldDivider 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 |
|---|---|
| FormFieldDivider_borderColor | theme.borderColor |
| FormFieldDivider_borderWidth | 1px |
| FormFieldDivider_margin | theme.space_stack_sm |
Usage #
When/How to Use #
FormFieldDividers are best used to call attention to a subtle difference between fields (e.g. Old Password and New Password).