# FormGridItem

> Grid cell that spans several columns; use it around a `Field` that needs the full row.

Source: https://ui.jcsoftdev.com/docs/components/form-grid-item

Grid cell that spans several columns; use it around a `Field` that needs the full row.

## Import

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

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

## Usage

```tsx
export const Default: Story = {
  render: (args) => (
    <FormGrid {...args}>
      <Field label="Nombre">
        <Input placeholder="Marco" />
      </Field>
      <Field label="Apellido">
        <Input placeholder="Salazar" />
      </Field>
      <Field label="Teléfono">
        <Input type="tel" placeholder="987 654 321" />
      </Field>
      <Field label="Barbero">
        <Select>
          <option>Diego Quispe</option>
          <option>Luis Paredes</option>
        </Select>
      </Field>
    </FormGrid>
  ),
};
```

_Source of the Storybook story._

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `span` | `2 \| 1 \| 3 \| "full"` | `1` | Columns the item spans once the grid has them; it never adds a column the grid does not have. `"full"` spans every column at any width. Default `1`. |

`*` marks a required prop.

It also accepts the native props of the element or primitive it renders (for example `className`, `id`, `aria-*` and event handlers).

## Storybook stories

- [Default](/storybook/?path=/story/forms-formgrid--default)
- [New Appointment](/storybook/?path=/story/forms-formgrid--new-appointment)
- [Narrow](/storybook/?path=/story/forms-formgrid--narrow)
- [Three Columns](/storybook/?path=/story/forms-formgrid--three-columns)
- [Single Column](/storybook/?path=/story/forms-formgrid--single-column)

## Source

`packages/ui/src/forms/form-grid/form-grid.tsx`