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 for="example2">Label</FormLabel>
  <TextInput
    placeholder="Text input default"
    leftIcon={<Icon icon="account_circle" />}
    inputId="example2"
  ></TextInput>
  <FormCaption>This is a help text</FormCaption>
</FormField>
<!-- Text input in disabled severity, size small -->
<FormField>
  <FormLabel required for="example1" size="small" disabled
    >Label</FormLabel
  >
  <TextInput
    placeholder="Text input small disabled"
    leftIcon={<Icon icon="account_circle" />}
    inputId="example1"
    size="small"
    disabled
  ></TextInput>
  <FormCaption size="small" disabled>This is a help text</FormCaption>
</FormField>
<!-- Text input in error severity, size medium -->
<FormField>
  <FormLabel required for="example3" size="medium">Label</FormLabel>
  <TextInput
    placeholder="Text input medium"
    leftIcon={<Icon icon="account_circle" />}
    inputId="example3"
    size="medium"
    severity="error"
  ></TextInput>
  <FormCaption size="medium" severity="error">Error message</FormCaption>
</FormField>
<!-- Text input in warning severity, size large -->
<FormField>
  <FormLabel required for="example4" size="large">Label</FormLabel>
  <TextInput
    placeholder="Text input large"
    leftIcon={<Icon icon="account_circle" />}
    inputId="example4"
    size="large"
    severity="warning"
  ></TextInput>
  <FormCaption size="large" severity="warning">Warning message</FormCaption>
</FormField>

API

Loading API documentation...