> Source: https://laravilt.com/docs/forms/pickers/introduction

# Picker Fields

Specialized selection components.

## Available Components

| Component | Description | Vue Package |
|-----------|-------------|-------------|
| `ColorPicker` | Color selection | vue-color / native |
| `IconPicker` | Icon selection | Custom + Lucide |
| `TagsInput` | Multi-tag input | Radix Vue TagsInput |
| `Slider` | Range slider | Radix Vue Slider |

## ColorPicker

```php
<?php

use Laravilt\Forms\Components\ColorPicker;

ColorPicker::make('brand_color')
    ->label('Brand Color')
    ->default('#3b82f6');
```

Vue component uses native color input or vue-color:

```vue
<template>
  <input type="color" v-model="modelValue" />
</template>
```

## IconPicker

```php
<?php

use Laravilt\Forms\Components\IconPicker;

IconPicker::make('icon')
    ->label('Select Icon')
    ->searchable();
```

Uses Lucide icons:

```vue
<script setup>
import * as icons from 'lucide-vue-next'
</script>
```

## TagsInput

```php
<?php

use Laravilt\Forms\Components\TagsInput;

TagsInput::make('tags')
    ->suggestions(['php', 'laravel', 'vue'])
    ->max(5);
```

## Slider

```php
<?php

use Laravilt\Forms\Components\Slider;

Slider::make('volume')
    ->min(0)
    ->max(100)
    ->step(1);
```

Uses Radix Vue Slider:

```vue
<script setup>
import { Slider } from '@/components/ui/slider'
</script>
```

## Related

- [ColorPicker](https://github.com/laravilt/laravilt/blob/HEAD/docs/forms/pickers/color-picker) - Color selection
- [IconPicker](https://github.com/laravilt/laravilt/blob/HEAD/docs/forms/pickers/icon-picker) - Icon selection
- [TagsInput](https://github.com/laravilt/laravilt/blob/HEAD/docs/forms/pickers/tags-input) - Tag input
- [Slider](https://github.com/laravilt/laravilt/blob/HEAD/docs/forms/pickers/slider) - Range slider