Skip to content

Color.md

Latest commit

 

History

History
118 lines (86 loc) · 2.3 KB

Color.md

File metadata and controls

118 lines (86 loc) · 2.3 KB

Color

The Color component allows users to select colors using either a color picker or from a predefined set of color options.

Basic Usage

use TallStackUIFilament\Forms\Components\Color;

Color::make('background_color')
    ->label('Background Color'),

Color Picker

Enable a color picker interface with the picker() method:

Color::make('text_color')
    ->picker(), // Enables the color picker interface

Predefined Colors

Provide a set of predefined color options that users can choose from:

Color::make('status_color')
    ->colors([
        '#FF0000', // Red
        '#00FF00', // Green
        '#0000FF', // Blue
        '#FFFF00', // Yellow
    ]),

You can also use a Collection of colors:

use Illuminate\Support\Collection;

Color::make('theme_color')
    ->colors(collect([
        '#1A1A1A', // Dark
        '#FFFFFF', // Light
        '#3B82F6', // Blue
    ])),

Clearable

Allow users to clear the selected color with the clearable() method:

Color::make('accent_color')
    ->clearable(), // Allows clearing the selected color

Selectable

Make the color component selectable with the selectable() method:

Color::make('brand_color')
    ->selectable(), // Makes the color component selectable

Placeholder

Add a placeholder to guide users:

Color::make('border_color')
    ->placeholder('Select a color...'),

Combining Features

You can combine multiple features to create a highly customized color selector:

use TallStackUIFilament\Forms\Components\Color;

Color::make('theme_color')
    ->label('Theme Color')
    ->colors([
        '#FF0000', // Red
        '#00FF00', // Green
        '#0000FF', // Blue
        '#FFFF00', // Yellow
        '#FF00FF', // Magenta
        '#00FFFF', // Cyan
    ])
    ->picker() // Enable picker for custom colors
    ->clearable()
    ->selectable()
    ->placeholder('Choose a theme color')
    ->required(),

Validation

Add validation rules as needed:

Color::make('brand_color')
    ->required()
    ->rules(['regex:/^#[0-9A-F]{6}$/i']), // Ensures input is a valid hex color

Additional Input Attributes

Add custom HTML attributes to the input element:

Color::make('background_color')
    ->extraInputAttributes(['data-theme' => 'dark']),