# Duration Select
URL: /docs/web/components/duration-select

Duration Select component with multiple variants and sizes.

**Demo:**

```tsx
'use client';
// @custom-demo

import { useState } from 'react';

import { DurationSelect, type DurationFormat } from '@docyrus/ui/components/duration-select';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue
} from '@docyrus/ui/primitives/ui/select';
import { Switch } from '@docyrus/ui/primitives/ui/switch';
import { cn } from '@docyrus/ui/primitives/lib/utils';

export function DurationSelectDemo() {
  const [value, setValue] = useState<number | null>(3900);
  const [format, setFormat] = useState
                  
                    
                    
                  
                
              </div>
              <label className="flex items-center gap-2">
                
                <span className="text-xs">Disabled</span>
              </label>
            </div>
          </div>
        </div>
      </div>
      <div className="mx-auto max-w-xs">
        
      </div>
    </div>
  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-duration-select
```

**Dependencies:**
- [lucide-react](https://www.npmjs.com/package/lucide-react)

## Usage

```tsx
import {
  DurationSelect
} from "@docyrus/ui/components/duration-select";

<DurationSelect
  value={...}
  onChange={() => {}}
  format="compact"
  minuteIncrement={5}
  maxHours={8}
  placeholder="..."
/>
```

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `value` | `number \| null \| undefined` | — |
| `onChange` | `(seconds: number \| null) => void` | — |
| `format` | `DurationFormat` | `'compact'` |
| `minuteIncrement` | `number` | `5` |
| `maxHours` | `number` | `8` |
| `disabled` | `boolean` | `false` |
| `invalid` | `boolean` | `false` |
| `placeholder` | `string` | — |
| `className` | `string` | — |