Field
A wrapper component for form fields.
import { Field } from '@aragon/ui'
const App = () => (
<Field label="Enter name here:">
<input />
</Field>
)

TYPE | DEFAULT VALUE |
---|---|
String | None |
Set a label for your Field.
const App = () => <Field label="Billing Address">{/* Field Input(s) */}</Field>
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.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.<Field label="Phone number">
{({ id }) => (
<p>
<TextInput placeholder="Prefix" value="+44" />
<TextInput placeholder="Number" value="" id={id} />
</p>
)}
</Field>
Last modified 6mo ago