Field

Used to add labels, help text, and error messages to form fields.

<Field label="Email">
  <Input placeholder="me@example.com" />
</Field>

Examples

Pass the invalid and errorText prop to Field to indicate that the field is invalid.

EmailThis is an error text

<Field errorText="This is an error text" label="Email" invalid>
  <Input placeholder="me@example.com" />
</Field>

Pass the helperText prop to Field to add helper text to the field.

EmailThis is a helper text

<Field helperText="This is a helper text" label="Email">
  <Input placeholder="me@example.com" />
</Field>

Use the disabled prop to disable the field.

<Field label="Email" disabled>
  <Input placeholder="me@example.com" />
</Field>

Here's how to use the field component with a textarea.

<Field label="Email">
  <Textarea placeholder="me@example.com" />
</Field>