# V collapsible 5

> Collapsible form fields

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

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

## Install

```bash
npx shadcn@latest add https://ui.cnippet.dev/r/v-collapsible-5.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/collapsible`

## Files

### `registry/default/variants/v-collapsible-5.tsx`

```tsx
"use client";

import { Settings2Icon } from "lucide-react";
import { useState } from "react";
import { Button } from "@/registry/default/ui/button";
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/registry/default/ui/card";
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/registry/default/ui/collapsible";
import { Field, FieldLabel } from "@/registry/default/ui/field";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/registry/default/ui/input-group";

export function Pattern() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <div className="h-54 w-full max-w-xs">
      <Card>
        <CardHeader>
          <CardTitle>Unit Pricing</CardTitle>
        </CardHeader>
        <CardContent>
          <Collapsible
            className="flex flex-col gap-3"
            onOpenChange={setIsOpen}
            open={isOpen}
          >
            <div className="flex items-end gap-2">
              <Field className="flex-1">
                <FieldLabel className="sr-only">Base Price</FieldLabel>
                <InputGroup>
                  <InputGroupInput
                    defaultValue="19.00"
                    placeholder="0.00"
                    type="number"
                  />
                  <InputGroupAddon align="inline-end">
                    <InputGroupText>$</InputGroupText>
                  </InputGroupAddon>
                </InputGroup>
              </Field>
              <CollapsibleTrigger
                render={
                  <Button className="shrink-0" size="icon" variant="outline" />
                }
              >
                <Settings2Icon aria-hidden="true" className="size-3.5" />
              </CollapsibleTrigger>
            </div>

            <CollapsibleContent className="data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
              <Field>
                <FieldLabel>Tax Rate (%)</FieldLabel>
                <InputGroup>
                  <InputGroupInput
                    defaultValue="15"
                    placeholder="0"
                    type="number"
                  />
                  <InputGroupAddon align="inline-end">
                    <InputGroupText>%</InputGroupText>
                  </InputGroupAddon>
                </InputGroup>
              </Field>
              <Field>
                <FieldLabel>Discount (%)</FieldLabel>
                <InputGroup>
                  <InputGroupInput
                    defaultValue="0"
                    placeholder="0"
                    type="number"
                  />
                  <InputGroupAddon align="inline-end">
                    <InputGroupText>%</InputGroupText>
                  </InputGroupAddon>
                </InputGroup>
              </Field>
            </CollapsibleContent>
          </Collapsible>
        </CardContent>
      </Card>
    </div>
  );
}
```