FormGridItem

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

Import

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

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

Usage

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
• New Appointment
• Narrow
• Three Columns
• Single Column

Source

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