# Field

> `Field` is part of the Forms set, imported from `@jcsoftdev/ui/forms`.

Source: https://ui.jcsoftdev.com/docs/components/field

`Field` is part of the Forms set, imported from `@jcsoftdev/ui/forms`.

## Import

```ts
import { Field } from "@jcsoftdev/ui/forms";
```

Single-component entry points tree-shake to just this component: `@jcsoftdev/ui/forms/field`.

## Usage

```tsx
<Field
  label="Nombre del cliente"
  hint="Como aparecerá en la agenda"
>
  <Input placeholder="Ej. Marco Salazar" />
</Field>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` * | `string` |  |  |
| `hint` | `string` |  |  |
| `error` | `string` |  |  |
| `id` | `string` |  |  |
| `children` * | `ReactElement<ControlProps, string \| React.JSXElementConstructor<any>>` |  |  |
| `className` | `string` |  |  |

`*` marks a required prop.

## Storybook stories

- [Default](/storybook/?path=/story/forms-field--default)
- [With Error](/storybook/?path=/story/forms-field--with-error)
- [Hint And Error](/storybook/?path=/story/forms-field--hint-and-error)
- [With Select](/storybook/?path=/story/forms-field--with-select)
- [With Textarea](/storybook/?path=/story/forms-field--with-textarea)
- [Controlled Form](/storybook/?path=/story/forms-field--controlled-form)

## Source

`packages/ui/src/forms/field/field.tsx`