Skip to content

Field

Wrapper for form content that adds labels and status messages
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
"0" | "auto" | "px" | "0.25" | "0.5" | "0.75" | "1" | "1.25" | "1.5" | "1.75" | "2" | "2.5" | "3" | "3.5" | "4" | "4.5" | "5" | "5.5" | "6" | "6.5" | "7" | "7.5" | "8" | "8.5" | "9" | "10" | "11" | "12" | "13" | "14" | "15" | "16" | "18" | "20" | "22.5" | "24" | "26" | "28" | "30" | "32" | "36" | "40" | "44" | "45" | "48" | "52" | "56" | "60" | "64" | "72" | "80" | "96" | "112" | "128" | "144" | "168" | "192" | "224" | "256" | "288" | "320" | "1/4" | "1/3" | "1/2" | "2/3" | "3/4" | "full" | "fit" | "max" | "min" | "viewHeight" | "viewWidth" | "none" | "dialogMobileWidth" | "dialogDesktopWidth" | "-1.5" | "-4" | "-6"
full
A tokens space key value setting the width of the parent element.

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

v1.0