Form Field

Form Field is a single field in a form. The following elements are designed to work inside a form field:

• Form label
• input:
  • Checkbox
  • Dropdown select
  • Multiselect
  • Radio
  • Text area
  • Text input
  • Toggle switch
• Form caption

Label

account_circle

This is a help text

Label

account_circle

This is a help text

Label

account_circle

Error message

Label

account_circle

Warning message

// Default Text input
<FormField>
  <FormLabel required htmlFor="example2">
    Label
  </FormLabel>
  <TextInput
    inputProps={{
      id: "example2",
      placeholder: "Text input default"
    }}
    leftIcon="account_circle"
  />
  <FormCaption>This is a help text</FormCaption>
</FormField>
// Text input in disabled severity, size small
<FormField>
  <FormLabel required htmlFor="example1" size="small" disabled>
    Label
  </FormLabel>
  <TextInput
    inputProps={{
      id: "example1",
      placeholder: "Text input small disabled"
    }}
    leftIcon="account_circle"
    size="small"
    disabled
  />
  <FormCaption size="small" disabled>This is a help text</FormCaption>
</FormField>
// Text input in error severity, size medium
<FormField>
  <FormLabel required htmlFor="example3" size="medium">
    Label
  </FormLabel>
  <TextInput
    inputProps={{
      id: "example3",
      placeholder: "Text input medium"
    }}
    leftIcon="account_circle"
    severity="error"
    size="medium"
  />
  <FormCaption size="medium" severity="error">Error message</FormCaption>
</FormField>
// Text input in warning severity, size large
<FormField>
  <FormLabel required htmlFor="example4" size="large">
    Label
  </FormLabel>
  <TextInput
    inputProps={{
      id: "example4",
      placeholder: "Text input large"
    }}
    leftIcon="account_circle"
    severity="warning"
    size="large"
  />
  <FormCaption size="large" severity="warning">Warning message</FormCaption>
</FormField>

API

The FormField component accepts all the props a standard <div> does in React (HTML, ARIA, data attributes, event handlers, and children). Its props are typed as React.HTMLAttributes<HTMLDivElement>. See more about supported HTML props in React's documentation.

Loading API documentation...