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