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

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

import { Severity } from '../../../helpers/constants/design-system';

import { BannerAlert } from '../../component-library/banner-alert';

<BannerAlert
  severity={Severity.Warning}
  title="Deprecated"
  description="FormField has been deprecated in favor of FormTextField"
  actionButtonLabel="See details"
  actionButtonProps={{
    href: 'https://github.com/MetaMask/metamask-extension/issues/19737',
  }}
  marginBottom={4}
/>

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>