Guides
Forms
Field examples

Field Examples

Examples of component structure for some common field use cases.

Text field

<Field>
  <Label>Text</Label>
  <Input />
  <FieldDescription>Short description</FieldDescription>
  <FieldError>Error Message</FieldError>
</Field>

TextArea field

<Field>
  <Label>Multiline input</Label>
  <Textarea />
  <FieldDescription>Short description</FieldDescription>
  <FieldError>Error Message</FieldError>
</Field>

TextArea with char counter

<Field>
  <Label>Textarea with counter</Label>
  <Textarea value={value} onChange={setValue} maxLength={120} />
  <Flex justify="space-between">
    <FieldDescription>Short description</FieldDescription>
    <FieldCharCounter count={String(value).length} limit={120} />
  </Flex>
  <FieldError>Error Message</FieldError>
</Field>
Form fieldsForm control