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>