# V label 14

> Horizontal layout

A shadcn/ui block from the [@cnippet](https://ui.cnippet.dev/) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/cnippet/v-label-14).

- Page, with a live preview: https://shadcn.exchange/r/cnippet/v-label-14
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/cnippet/v-label-14-light-255098a024858dca.png
- Registry item: https://ui.cnippet.dev/r/v-label-14.json
- Categories: label
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-label-14.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `@cnippet/label`

## Files

### `registry/default/variants/v-label-14.tsx`

```tsx
import { useId } from "react";
import { Field } from "@/registry/default/ui/field";
import { Input } from "@/registry/default/ui/input";
import { Label } from "@/registry/default/ui/label";

const fields: {
  key: string;
  label: string;
  placeholder: string;
  type?: string;
}[] = [
  { key: "first", label: "First name", placeholder: "Jane" },
  { key: "last", label: "Last name", placeholder: "Smith" },
  {
    key: "email",
    label: "Email",
    placeholder: "jane@example.com",
    type: "email",
  },
];

export function Pattern() {
  return (
    <div className="w-full max-w-sm space-y-3">
      {fields.map(({ key, label, placeholder, type }) => (
        <HorizontalField
          key={key}
          label={label}
          placeholder={placeholder}
          type={type}
        />
      ))}
    </div>
  );
}

function HorizontalField({
  label,
  placeholder,
  type,
}: {
  label: string;
  placeholder: string;
  type?: string;
}) {
  const id = useId();
  return (
    <Field className="grid grid-cols-[100px_1fr] items-center gap-4">
      <Label className="text-right" htmlFor={id}>
        {label}
      </Label>
      <Input id={id} placeholder={placeholder} type={type} />
    </Field>
  );
}
```