FluxUI 中文网 · 官方 Livewire UI 库

小尺寸

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

<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.option.create> 组件允许用户创建新的选项。

当搜索输入与列表中已有项目匹配时，Flux 会自动隐藏“创建”选项。你也可以通过 min-length 属性指定“创建”选项出现所需的最小字符数。

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

No results found

后台管理

官网重构

数据平台

移动端

营销落地页

设计系统

创建 ""

<flux:select wire:model="projectId" variant="combobox">    <x-slot name="input">        <flux:select.input wire:model="search" placeholder="Start typing..." />    </x-slot>    @foreach ($this->projects as $project)        <flux:select.option :wire:key="$project->id">{{ $project->name }}</flux:select.option>    @endforeach    <flux:select.option.create wire:click="createProject" min-length="2">        Create "<span wire:text="search"></span>"    </flux:select.option.create></flux:select><!--public $search = '';public $projectId = null;public function createProject(){    $project = Project::create([        'name' => $this->search,    ]);    $this->projectId = $project->id;}-->

使用后端搜索

如果您使用 :filter="false"，请确保在搜索输入被清空时调整查询，以始终包含新创建的条目。

Flux 会在请求期间自动禁用创建选项以防重复提交，列表更新后还会在前端执行唯一性检查。

No results found

后台管理

官网重构

数据平台

移动端

营销落地页

设计系统

创建 ""

<flux:select wire:model="projectId" variant="combobox" :filter="false">    <x-slot name="input">        <flux:select.input wire:model.live="search" placeholder="Start typing..." />    </x-slot>    @foreach($this->projects as $project)        <flux:select.option :value="$project->id">{{ $project->name }}</flux:select.option>    @endforeach    <flux:select.option.create wire:click="createProject" min-length="2">        Create "<span wire:text="search"></span>"    </flux:select.option.create></flux:select><!--#[\Livewire\Attributes\Computed]public function projects() {    return Project::query()        ->where('name', 'like', '%' . trim($this->search) . '%')        ->limit(20)->get()        ->when(blank($this->search) && $this->projectId, function ($results) {            return Project::query()                ->whereIn('id', [$this->projectId])                ->whereNotIn('id', $results->pluck('id'))                ->get()->merge($results);        });}-->

使用 listbox 变体

如果在后端搜索中使用 listbox 变体，创建完成后务必清空搜索输入，避免前端清空输入时再次发送额外请求。

public function createProject() {    // Create logic...    $this->search = '';}

加载提示

When then create option is hidden by the frontend but new results aren't available yet, Flux displays a special "Loading..." message. To customize this message, use the when-loading prop on the <flux:select.option.empty> component.

<flux:select wire:model="projectId" variant="combobox" :filter="false">    ...    <x-slot name="empty">        <flux:select.option.empty when-loading="Loading projects...">            No projects found.        </flux:select.option.empty>    </x-slot></flux:select>

带验证

当你在后端执行额外验证时，一旦出现验证错误，搜索输入会显示为无效状态。请记得在用户更新输入时重置错误包。

No results found

后台管理

官网重构

数据平台

移动端

营销落地页

设计系统

创建 ""

<flux:select wire:model="projectId" variant="combobox" :filter="false">    <x-slot name="input">        <flux:select.input wire:model.live="search" placeholder="Start typing..." />    </x-slot>    ...    <flux:select.option.create wire:click="createProject" min-length="2">        Create "<span wire:text="search"></span>"    </flux:select.option.create></flux:select><!--public function createProject() {    $this->validate(['search' => 'required|unique:projects,name']);    // Create logic...}public function updatedSearch() {    $this->resetErrorBag('search');}-->

通过 modal 属性指定模态框名称，便于在表单中处理更复杂的创建流程。

后台管理

官网重构

数据平台

移动端

营销落地页

设计系统

创建新项目

<flux:select wire:model="projectId" variant="listbox">    @foreach($this->projects as $project)        <flux:select.option :value="$project->id">{{ $project->name }}</flux:select.option>    @endforeach    <flux:select.option.create modal="create-project">Create new</flux:select.option></flux:select><flux:modal name="create-project" class="md:w-96">    <form wire:submit="createProject" class="space-y-6">        <div>            <flux:heading size="lg">Create new project</flux:heading>            <flux:text class="mt-2">Enter the name of the new project.</flux:text>        </div>        <flux:input wire:model="projectName" label="Name" placeholder="e.g. 'UX Research'" />        <div class="flex">            <flux:spacer />            <flux:button type="submit" variant="primary">Create</flux:button>        </div>    </form></flux:modal>

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.option.create

属性	描述
min-length	显示创建选项前搜索输入框需要的最小字符数。
modal	选择该选项时需要打开的模态框名称。
wire:click	选择该选项时要调用的 Livewire 动作。

flux:select.option.empty

属性	描述
when-loading	在选项加载中时显示的提示文案。

插槽	描述
default	当没有查询到任何选项时显示的提示文案。

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 插槽

使用 listbox 变体

加载提示

相关组件

参考文档