Field

Search…

Field

A wrapper component for form fields.
Usage
import { Field } from '@aragon/ui'
​
const App = () => (
  <Field label="Enter name here:">
    <input />
  </Field>
)
Demonstration
Props
label
TYPE
DEFAULT VALUE
String
None
Set a label for your Field.
Example:
const App = () => <Field label="Billing Address">{/* Field Input(s) */}</Field>
required
TYPE
DEFAULT VALUE
Boolean
None
Marks the field as a required field. If not provided, Field will attempt to detect if the field is required by checking if any of its children contain a truthy required prop.
children
TYPE
DEFAULT VALUE
React node or Function
None
The field content, usually a form element like TextInput.
When a function is passed, it will take an object as parameter containing an id key, whose value is set to a unique id that can be passed to the desired form element.
Example:
<Field label="Phone number">
  {({ id }) => (
    <p>
      <TextInput placeholder="Prefix" value="+44" />
      <TextInput placeholder="Number" value="" id={id} />
    </p>
  )}
</Field>

TextCopy

VISUALIZATION

Last modified 2mo ago

Copy link

On this page

Usage

Demonstration

Props

Usage

Demonstration

Props

`label`

Example:

`required`

`children`

Example: