显示侧边栏

选择框

从下拉列表中选择单个选项。

对于不超过5个项目的列表，建议使用复选框或单选按钮。

<flux:select wire:model="industry" placeholder="Choose industry...">    <flux:select.option>Photography</flux:select.option>    <flux:select.option>Design services</flux:select.option>    <flux:select.option>Web development</flux:select.option>    <flux:select.option>Accounting</flux:select.option>    <flux:select.option>Legal services</flux:select.option>    <flux:select.option>Consulting</flux:select.option>    <flux:select.option>Other</flux:select.option></flux:select>

小尺寸

用于更紧凑布局的小尺寸选择元素。

<flux:select size="sm" placeholder="Choose industry...">    <flux:select.option>Photography</flux:select.option>    <flux:select.option>Design services</flux:select.option>    <flux:select.option>Web development</flux:select.option>    <flux:select.option>Accounting</flux:select.option>    <flux:select.option>Legal services</flux:select.option>    <flux:select.option>Consulting</flux:select.option>    <flux:select.option>Other</flux:select.option></flux:select>

自定义选择框

浏览器原生选择元素的替代方案。通常在需要自定义选项样式（如图标、图片和其他处理）时使用。

此变体仅在 Flux 的专业版中可用。

摄影

设计服务

网站开发

会计

法律服务

咨询

其他

<flux:select variant="listbox" placeholder="Choose industry...">    <flux:select.option>Photography</flux:select.option>    <flux:select.option>Design services</flux:select.option>    <flux:select.option>Web development</flux:select.option>    <flux:select.option>Accounting</flux:select.option>    <flux:select.option>Legal services</flux:select.option>    <flux:select.option>Consulting</flux:select.option>    <flux:select.option>Other</flux:select.option></flux:select>

button 插槽

如果您需要完全控制用于触发自定义选择框的按钮，可以使用 button 插槽来自定义渲染。

<flux:select variant="listbox">    <x-slot name="button">        <flux:select.button class="rounded-full!" placeholder="Choose industry..." :invalid="$errors->has('...')" />    </x-slot>    <flux:select.option>Photography</flux:select.option>    ...</flux:select>

可清除

如果您想让选中的值可以清除，可以使用 clearable 属性在输入框右侧添加一个"x"按钮：

<flux:select variant="listbox" clearable>    ...</flux:select>

带有图片/图标的选项

使用自定义列表框选择器相比原生 <select> 元素的一个明显优势是可以为选项添加图标和图片。

所有者

管理员

成员

查看者

<flux:select variant="listbox" placeholder="Select role...">    <flux:select.option>        <div class="flex items-center gap-2">            <flux:icon.shield-check variant="mini" class="text-zinc-400" /> Owner        </div>    </flux:select.option>    <flux:select.option>        <div class="flex items-center gap-2">            <flux:icon.key variant="mini" class="text-zinc-400" /> Administrator        </div>    </flux:select.option>    <flux:select.option>        <div class="flex items-center gap-2">            <flux:icon.user variant="mini" class="text-zinc-400" /> Member        </div>    </flux:select.option>    <flux:select.option>        <div class="flex items-center gap-2">            <flux:icon.eye variant="mini" class="text-zinc-400" /> Viewer        </div>    </flux:select.option></flux:select>

可搜索选择框

可搜索选择框变体使用户更容易在大型选项列表中导航。

此变体仅在 Flux 的专业版中可用。

摄影

设计服务

网站开发

会计

法律服务

咨询

其他

No results found

<flux:select variant="listbox" searchable placeholder="Choose industries...">    <flux:select.option>Photography</flux:select.option>    <flux:select.option>Design services</flux:select.option>    <flux:select.option>Web development</flux:select.option>    <flux:select.option>Accounting</flux:select.option>    <flux:select.option>Legal services</flux:select.option>    <flux:select.option>Consulting</flux:select.option>    <flux:select.option>Other</flux:select.option></flux:select>

search 插槽

如果您需要完全控制列表框内的搜索字段，可以使用 search 插槽来自定义渲染。

<flux:select variant="listbox" searchable>    <x-slot name="search">        <flux:select.search class="px-4" placeholder="Search industries..." />    </x-slot>    ...</flux:select>

多选选择框

允许用户从选项列表中选择多个选项。

此变体仅在 Flux 的专业版中可用。

摄影

设计服务

网站开发

会计

法律服务

咨询

其他

<flux:select variant="listbox" multiple placeholder="Choose industries...">    <flux:select.option>Photography</flux:select.option>    <flux:select.option>Design services</flux:select.option>    <flux:select.option>Web development</flux:select.option>    <flux:select.option>Accounting</flux:select.option>    <flux:select.option>Legal services</flux:select.option>    <flux:select.option>Consulting</flux:select.option>    <flux:select.option>Other</flux:select.option></flux:select>

选中后缀

默认情况下，当选择多个选项时，会在选中选项数量后面追加" selected"后缀。您可以通过向选择组件传递 selected-suffix 属性来自定义这个语言。

<flux:select variant="listbox" selected-suffix="industries selected" multiple>    ...</flux:select>

如果您传递了自定义后缀并需要本地化，可以使用 __() 助手函数来翻译后缀：

<flux:select variant="listbox" selected-suffix="{{ __('industries selected') }}" multiple>    ...</flux:select>

复选框指示器

如果您偏好使用复选框指示器而不是默认的勾选图标，可以使用 indicator="checkbox" 属性。

<flux:select variant="listbox" indicator="checkbox" multiple>    ...</flux:select>

清除搜索

默认情况下，可搜索选择框会在用户选择选项时清除搜索输入。如果您想禁用此行为，可以使用 clear="close" 属性，仅在用户关闭选择框时才清除搜索输入。

<flux:select variant="listbox" searchable multiple clear="close">    ...</flux:select>

组合框

一个多用途的组合框，可用于从基本自动完成到复杂多选等各种场景。

此变体仅在 Flux 的专业版中可用。

摄影

设计服务

网站开发

会计

法律服务

咨询

其他

No results found

<flux:select variant="combobox" placeholder="Choose industry...">    <flux:select.option>Photography</flux:select.option>    <flux:select.option>Design services</flux:select.option>    <flux:select.option>Web development</flux:select.option>    <flux:select.option>Accounting</flux:select.option>    <flux:select.option>Legal services</flux:select.option>    <flux:select.option>Consulting</flux:select.option>    <flux:select.option>Other</flux:select.option></flux:select>

input 插槽

如果您需要完全控制用于触发组合框的输入元素，可以使用 input 插槽来自定义渲染。

<flux:select variant="combobox">    <x-slot name="input">        <flux:select.input x-model="search" :invalid="$errors->has('...')" />    </x-slot>    ...</flux:select>

动态选项

如果您想在服务器上动态生成选项，可以使用 :filter="false" 属性来禁用客户端过滤。

此变体仅在 Flux 的专业版中可用。

<flux:select wire:model="userId" variant="combobox" :filter="false">    <x-slot name="input">        <flux:select.input wire:model.live="search" />    </x-slot>    @foreach ($this->users as $user)        <flux:select.option value="{{ $user->id }}" wire:key="{{ $user->id }}">            {{ $user->name }}        </flux:select.option>    @endforeach</flux:select><!--public $search = '';public $userId = null;#[\Livewire\Attributes\Computed]public function users() {    return \App\Models\User::query()        ->when($this->search, fn($query) => $query->where('name', 'like', '%' . $this->search . '%'))        ->limit(20)        ->get();}-->

字段

带有标签和验证状态的结构化表单字段

胶囊框

基于胶囊的选择组件

单选按钮

从多个选项中选择一个的控件

参考文档

flux:select

属性	描述
wire:model	将选择框绑定到 Livewire 属性。更多信息请查看 wire:model 文档。
placeholder	未选择选项时显示的文本。
label	显示在选择框上方的标签文本。提供时，会将选择框包装在 flux:field 组件中，并附加 flux:label 组件。请参阅 field 组件。
description	显示在选择框下方的帮助文本。与 label 一起提供时，会出现在 flux:field 包装器内标签和选择框之间。请参阅 field 组件。
description:trailing	提供的描述将显示在选择框下方而不是上方。
badge	当提供 label 属性时，在 flux:label 组件末尾显示的徽章文本。
size	选择框的尺寸。选项：sm、xs。
variant	选择框的视觉样式。选项：default（原生选择框）、listbox、combobox。
multiple	允许选择多个选项（仅限 listbox 变体）。
filter	如果为 false，禁用客户端过滤。
searchable	添加搜索输入框来过滤选项（仅限 listbox 和 combobox 变体）。
clearable	选择选项时显示清除按钮（仅限 listbox 和 combobox 变体）。
selected-suffix	在多选模式下附加在选中选项数量后面的文本（仅限 listbox 变体）。
clear	何时清除搜索输入。选项：select（默认）、close（仅限 listbox 和 combobox 变体）。
disabled	阻止用户与选择框交互。
invalid	为选择框应用错误样式。

插槽	Description
default	选择框的选项。
trigger	自定义触发器内容。通常是 select.button 或 select.input 组件（仅限 listbox 和 combobox 变体）。

属性	Description
data-flux-select	应用于根元素的样式和标识。

flux:select.option

属性	描述
value	与选项关联的值。
disabled	阻止选择该选项。

插槽	Description
default	选项内容（在 listbox 变体中可包含图标、图片等）。

flux:select.button

属性	描述
placeholder	未选择选项时显示的文本。
invalid	为按钮应用错误样式。
size	按钮的尺寸。选项：sm、xs。
disabled	阻止选择该选项。
clearable	选择选项时显示清除按钮。

flux:select.input

属性	描述
placeholder	未选择选项时显示的文本。
invalid	为输入框应用错误样式。
size	输入框的尺寸。选项：sm、xs。

flux:select.search

属性	描述
placeholder	输入框为空时显示的占位符文本。
icon	在输入框开始处显示的图标名称。
clearable	输入框有内容时显示清除按钮。默认值：true。

选择框

button 插槽

可清除

带有图片/图标的选项

search 插槽

选中后缀

复选框指示器

清除搜索

input 插槽

相关组件

参考文档