> For the complete documentation index, see [llms.txt](https://3merge.gitbook.io/q3/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://3merge.gitbook.io/q3/client/forms/field.md).

# Field

Input component for all sorts of data entry

```jsx
import { Field } from 'q3-ui-forms/lib/builders';

/**
 * Select component that only shows when "bar" has value.
 * It will also reset itself when "bar's" state changes.
 */
export const CustomFormField = () => (
    <Field 
        name="foo"
        type="select"
        options={[
            { label: 'One', value: 1 },
            { label: 'Two', value: 2 }, 
        ]}
        conditional={['bar=*']}
        listen="bar"
        required
    />
);
```

| Prop     | Description                                            | Validation        | Required |
| -------- | ------------------------------------------------------ | ----------------- | -------- |
| `listen` | Reset this input's value when other form fields change | `String`, `Array` |          |