metamask-extension/ui/components/ui/form-field

import { Story, Canvas, ArgsTable } from '@storybook/addon-docs';

import FormField from '.';

# Form Field

Various data fields available for forms and pages.

<Canvas>
  <Story id="components-ui-formfield--default-story" />
</Canvas>

## Props

<ArgsTable of={FormField} />

### Title detail

Show form fields with title detail on the left of the title

<Canvas>
  <Story id="components-ui-formfield--form-field-with-title-detail" />
</Canvas>

### Error

Show form fields with error state

<Canvas>
  <Story id="components-ui-formfield--form-field-with-error" />
</Canvas>

### Custom Components

Use the custom component props `TitleTextCustomComponent`, `TitleUnitCustomComponent` and `TooltipCustomComponent` to replace the default components.
If these props exists they will replace their respective text props. The FormField is wrapped in a Box component that renders as a `<label />` element.
To change the element type, use the `wrappingLabelProps` and polymorphic `as` prop. e.g `wrappingLabelProps={{ as: 'div' }}`. Make sure to provide your own `<label />` element combined with the `id` prop and `htmlFor` to ensure accessibility

<Canvas>
  <Story id="components-ui-formfield--custom-components" />
</Canvas>