# Advanced options

> Form reveals extra fields behind an Advanced options toggle.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/collapsible-06).

- Page, with a live preview: https://shadcn.exchange/r/flx/collapsible-06
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/collapsible-06-light-75e0ae76973a1ccf.png
- Registry item: https://ui.flexnative.com/r/collapsible-06.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/collapsible-06.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: `collapsible`, `input`, `label`

## Files

### `registry/patterns/collapsible/collapsible-06.tsx`

```tsx
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from '@/components/ui/collapsible'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { ChevronDownIcon } from 'lucide-react'

export function Collapsible06() {
  return (
    <form className="w-full max-w-sm space-y-4">
      <div className="space-y-2">
        <Label htmlFor="name">Project name</Label>
        <Input id="name" placeholder="my-app" />
      </div>
      <Collapsible className="space-y-4">
        <CollapsibleTrigger className="group text-muted-foreground hover:text-foreground flex items-center gap-1 text-sm font-medium">
          <ChevronDownIcon className="size-4 transition-transform group-data-panel-open:rotate-180" />
          Advanced options
        </CollapsibleTrigger>
        <CollapsibleContent className="space-y-4 p-1">
          <div className="space-y-2">
            <Label htmlFor="region">Region</Label>
            <Input id="region" placeholder="us-east-1" />
          </div>
          <div className="space-y-2">
            <Label htmlFor="branch">Production branch</Label>
            <Input id="branch" placeholder="main" />
          </div>
        </CollapsibleContent>
      </Collapsible>
    </form>
  )
}
```