Field

Wrapper for form content that adds labels and status messages


import { Field } from '@ensdomains/thorin'

Label

Secondary

Description

Label

Secondary

Description

<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>

Open in Playroom

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.