# Collapsible form fields

> Collapsible form fields

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

- Page, with a live preview: https://shadcn.exchange/r/reui/c-collapsible-5
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/reui/c-collapsible-5-light-edc9258385126673.png
- Registry item: https://reui.io/r/new-york-v4/c-collapsible-5.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://reui.io/r/new-york-v4/c-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: `button`, `card`, `collapsible`, `field`, `input-group`

## Files

### `c-collapsible-5.tsx`

```tsx
"use client"

import { useState } from "react"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group"
import { IconPlaceholder } from "@/app/(create)/components/icon-placeholder"

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

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

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