Phara UI v2.x
Login

Select

Dropdown select component with sizes, variants, and labels.

Basic

Default select component with inline options

Blade 
<x-ui::select name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="mx">Mexico</option>
</x-ui::select>
Sizes

Available size options for different use cases.

Blade 
<x-ui::select name="size_lg" size="lg">
<option value="1">Large select</option>
</x-ui::select>
Variants

Use the variant prop to change the visual style.

Blade 
<x-ui::select name="variant_filled" variant="filled">
<option value="1">Filled variant</option>
</x-ui::select>
With Label

Add a label to provide context for the select field.

Blade 
<x-ui::select name="country_labeled" label="Country">
<option value="us">United States</option>
<option value="ca">Canada</option>
</x-ui::select>
With Placeholder

Add a placeholder option that is disabled and selected by default.

Blade 
<x-ui::select name="role" label="Role" placeholder="Select a role">
<option value="admin">Administrator</option>
<option value="user">User</option>
</x-ui::select>
Options Array

Pass options as an array for dynamic content.

Blade 
@php
$countries = [
    "us" => "United States",
    "ca" => "Canada",
    "mx" => "Mexico"
];
@endphp

<x-ui::select name="country" :options="$countries" />
Disabled

Prevent user interaction with the disabled attribute.

Blade 
<x-ui::select name="disabled_select" disabled>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</x-ui::select>