Components
select

Select

Customizable dropdown for single or multiple selection options.

Demo

<div class="w-full space-y-3">
    <x-ui.select name="select-country" id="select-country">
        <option value="DRC">DR Congo</option>
        <option value="TZ">Tanzania</option>
        <option value="MA">Morocco</option>
        <option value="NG">Nigeria</option>
    </x-ui.select>
    <x-ui.select name="select-country" id="select-country"
       variant="flush" class="bg-bg-muted">
        <option value="DRC">DR Congo</option>
        <option value="TZ">Tanzania</option>
        <option value="MA">Morocco</option>
        <option value="NG">Nigeria</option>
    </x-ui.select>
</div>

Installation

Shell

php artisan flexi:add select

With label

Country

<div class="w-full space-y-4">
    <x-ui.select label="Country" name="select-country_label" id="select-country_label">
        <option value="DRC">DR Congo</option>
        <option value="TZ">Tanzania</option>
        <option value="MA">Morocco</option>
        <option value="NG">Nigeria</option>
    </x-ui.select>
    <x-ui.select inlined-label label="Country" label-class="min-w-max" name="select-country_inlined" id="select-country_inlined"
        variant="flush" class="bg-bg-muted">
        <option value="DRC">DR Congo</option>
        <option value="TZ">Tanzania</option>
        <option value="MA">Morocco</option>
        <option value="NG">Nigeria</option>
    </x-ui.select>
</div>

With Icon

Preview
Code

Icon Indicator

<div class="relative w-full">
    <x-ui.select name="select-country" id="select-country" class="pe-9" :indicator="false">
        <option value="DRC">DR Congo</option>
        <option value="TZ">Tanzania</option>
        <option value="MA">Morocco</option>
        <option value="NG">Nigeria</option>
    </x-ui.select>
    <span aria-hidden="true"
        class="absolute right-3 inset-y-px text-fg-muted pointer-events-none flex items-center">
        <span class="flex iconify ph--caret-up-down text-sm"></span>                             
    </span>
</div>

References

Composition

Prop	Description
`x-ui.select`	The main select component
`x-ui.input.group`	A container wrapper for select groups that provides consistent styling and layout
`x-ui.input.leading`	A leading element container for selects, typically used for icons or text that appears before the select content. Can be positioned absolutely or inline.
`x-ui.input.trailing`	A trailing element container for selects, typically used for icons or text that appears after the select content. Can be positioned absolutely or inline.

Select Props

To configure the select component you can use the following props. All props are optional.

Prop	Description
`size` (string)	The size of the select. Options: "sm", "md", "lg", "none". Default: "md"
`disabled` (boolean)	Whether the select is disabled. Default: false
`readonly` (boolean)	Whether the select is readonly. Default: false
`label` (string)	The label text for the select. Default: null
`variant` (string)	The variant of the select. Options: "default", "ghost", "flush", "unstyled". Default: "default"
`labelPosition` (top\|inline)	Position of the label relative to the select. Options: "top", "inline". Default: "top"
`labelClass` (string)	Additional CSS classes for the label. Default: ''
`indicator` (boolean)	Controls the dropdown indicator visibility. Default: true
`class` (string)	Additional CSS classes for the select. Default: ''

Group Props

The select component uses the same input group component. See input component references for group props.

Edit this page

Checkbox

Form control for ind...