Skip to content

Field

Wrapper for form content that adds labels and status messages
import { Field } from '@ensdomains/thorin'
<Field label="Label">
<div style={{ backgroundColor: 'black', height: 8 }} />
</Field>

Props
#

name
type
default
description
description
ReactNode
-
Description text or react component.
error
ReactNode
-
Error text or a react component.
hideLabel
boolean
-
If true, hides the label and secondary label.
id
string
-
The id attribute of the label element
inline
boolean
-
If true, moves the label and status messages to the right of the content.
label*
Required
ReactNode
-
Label text or react component
labelPlacement
"top" | "bottom" | { error?: Placement | undefined; description?: Placement | undefined; }
-
Set the placement of the error and description. Does not affect inline mode.
labelRight
boolean
false
Have lavel appear on the right of the form element.
labelSecondary
ReactNode
-
Secondary text or react component
required
boolean
-
Adds mark to label
width
any
full
A tokens space key value setting the width of the parent element.

Variants
#

Required
#

Description
#

Error
#

Label Placement
#

Hide Label
#

Secondary Label
#

Consume ID
#

The content wrapped by field sets an id automatically for accessibility. You can customize the behavior by using the render prop.

Edit on GitHub