# Field

A wrapper component for form fields.

## Usage <a href="#usage" id="usage"></a>

```jsx
import { Field } from '@aragon/ui'

const App = () => (
  <Field label="Enter name here:">
    <input />
  </Field>
)
```

## Demonstration

![](https://1303901111-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FqkA65ZBta5cBbldyxyst%2Fuploads%2Fgit-blob-f7dbffe7f000f1d0bc7e4cbed95b5639ece9a858%2FSchermata%202022-06-25%20alle%2023.14.59.png?alt=media)

## Props <a href="#props" id="props"></a>

#### `label` <a href="#label" id="label"></a>

| TYPE     | DEFAULT VALUE |
| -------- | ------------- |
| `String` | None          |

Set a label for your Field.

#### **Example:**

```jsx
const App = () => <Field label="Billing Address">{/* Field Input(s) */}</Field>
```

#### `required` <a href="#required" id="required"></a>

| 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` <a href="#children" id="children"></a>

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

```jsx
<Field label="Phone number">
  {({ id }) => (
    <p>
      <TextInput placeholder="Prefix" value="+44" />
      <TextInput placeholder="Number" value="" id={id} />
    </p>
  )}
</Field>
```