# FormGrid

> Grid for pairs of fields.

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

Grid for pairs of fields. One column in a narrow container, two columns from 620px of
container width (the wrapper is the size container; the grid keeps `className` and props).

## Import

```ts
import { FormGrid } 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

This component declares no props of its own.

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)

## Source

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