Skip to content

Field

Wrapper for form content that adds labels and status messages
import { Field } from '@ensdomains/thorin'
<DeleteMe>
  <Field description="Description" label="Label" labelSecondary="Secondary">
    <div style={{ backgroundColor: 'black', height: 20 }} />
  </Field>
  <Field
    description="Description"
    inline
    label="Label"
    labelSecondary="Secondary"
  >
    <div style={{ backgroundColor: 'black', width: 20, height: 20 }} />
  </Field>
</DeleteMe>

Props
#

name
type
default
description
description
ReactNode
-
Description text or react component.
disabled
boolean
-
-
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
labelSecondary
ReactNode
-
Secondary text or react component
readOnly
boolean
-
If true, will set the Fields component to read only mode
required
boolean
-
Adds mark to label
reverse
boolean
false
Have label appear on the left of the form element.
width
any
full
A tokens space key value setting the width of the parent element.

Variants
#

Required
#

Description
#

Error
#

Disabled
#

Hide 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