FluxUI 中文网 · 复选框组件

复选框组

将相关复选框列表按垂直方向排列。

使用复选框组时，可以在组元素或单个复选框上添加 wire:model。

通知

推送通知

电子邮件

应用内提醒

短信

<flux:checkbox.group wire:model="notifications" label="Notifications">    <flux:checkbox label="Push notifications" value="push" checked />    <flux:checkbox label="Email" value="email" checked />    <flux:checkbox label="In-app alerts" value="app" />    <flux:checkbox label="SMS" value="sms" /></flux:checkbox.group>

带描述

将每个复选框的描述与其标签保持上下对齐。

订阅偏好

新闻通讯

每月接收包含最新更新与优惠的新闻通讯。

产品更新

随时掌握新功能和产品动态。

活动邀请

收到我们的专属活动与网络研讨会邀请。

<flux:checkbox.group wire:model="subscription" label="Subscription preferences">    <flux:checkbox checked        value="newsletter"        label="Newsletter"        description="Receive our monthly newsletter with the latest updates and offers."    />    <flux:checkbox        value="updates"        label="Product updates"        description="Stay informed about new features and product updates."    />    <flux:checkbox        value="invitations"        label="Event invitations"        description="Get invitations to our exclusive events and webinars."    /></flux:checkbox.group>

水平字段集

将一组相关复选框按水平方向排列。

语言

选择你希望支持的语言。

英语

西班牙语

法语

德语

<flux:fieldset>    <flux:legend>Languages</flux:legend>    <flux:description>Choose the languages you want to support.</flux:description>    <div class="flex gap-4 *:gap-x-2">        <flux:checkbox checked value="english" label="English" />        <flux:checkbox checked value="spanish" label="Spanish" />        <flux:checkbox value="french" label="French" />        <flux:checkbox value="german" label="German" />    </div></flux:fieldset>

全选

使用单个复选框控制一组复选框。

	姓名
	吴亦凡
	苏菲玛索
	吴彦祖

<flux:checkbox.group>    <flux:checkbox.all />    <flux:checkbox checked />    <flux:checkbox />    <flux:checkbox /></flux:checkbox.group>

默认选中

将复选框默认标记为选中。

启用通知

<flux:checkbox checked />

禁用

阻止用户与复选框交互并修改其状态。

读写

<flux:checkbox disabled />

卡片式复选框

一种带边框的复选框替代样式。

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

订阅偏好

新闻通讯

获取最新更新和优惠。

产品更新

了解新功能和产品。

活动邀请

获取专属活动邀请。

<flux:checkbox.group wire:model="subscription" label="Subscription preferences" variant="cards" class="max-sm:flex-col">    <flux:checkbox checked        value="newsletter"        label="Newsletter"        description="Get the latest updates and offers."    />    <flux:checkbox        value="updates"        label="Product updates"        description="Learn about new features and products."    />    <flux:checkbox        value="invitations"        label="Event invitations"        description="Invitatations to exclusive events."    /></flux:checkbox.group>

可以根据视口情况有条件地应用 flex-col，以在垂直和水平卡片布局之间切换。

<flux:checkbox.group ... class="max-sm:flex-col">    <!-- ... --></flux:checkbox.group>

垂直卡片

只需在组容器上添加 flex-col 类，就能将复选框卡片纵向排列。

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

订阅偏好

新闻通讯

获取最新更新和优惠。

产品更新

了解新功能和产品。

活动邀请

获取专属活动邀请。

<flux:checkbox.group label="Subscription preferences" variant="cards" class="flex-col">    <flux:checkbox checked        value="newsletter"        label="Newsletter"        description="Get the latest updates and offers."    />    <flux:checkbox        value="updates"        label="Product updates"        description="Learn about new features and products."    />    <flux:checkbox        value="invitations"        label="Event invitations"        description="Invitatations to exclusive events."    /></flux:checkbox.group>

带图标的卡片

只需在组容器上添加 flex-col 类，就能将这些带图标的复选框卡片纵向排列。

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

订阅偏好

新闻通讯

获取最新更新和优惠。

产品更新

了解新功能和产品。

活动邀请

获取专属活动邀请。

<flux:checkbox.group label="Subscription preferences" variant="cards" class="flex-col">    <flux:checkbox checked        value="newsletter"        icon="newspaper"        label="Newsletter"        description="Get the latest updates and offers."    />    <flux:checkbox        value="updates"        icon="cube"        label="Product updates"        description="Learn about new features and products."    />    <flux:checkbox        value="invitations"        icon="calendar"        label="Event invitations"        description="Invitatations to exclusive events."    /></flux:checkbox.group>

自定义卡片内容

可以通过 flux:checkbox 组件插槽自行组合卡片内容。

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

订阅偏好

新闻通讯

获取最新更新和优惠。

产品更新

了解新的功能和产品。

活动邀请

获取专属活动邀请。

<flux:checkbox.group label="Subscription preferences" variant="cards" class="flex-col">    <flux:checkbox checked value="newsletter">        <flux:checkbox.indicator />        <div class="flex-1">            <flux:heading class="leading-4">Newsletter</flux:heading>            <flux:text size="sm" class="mt-2">Get the latest updates and offers.</flux:text>        </div>    </flux:checkbox>    <flux:checkbox value="updates">        <flux:checkbox.indicator />        <div class="flex-1">            <flux:heading class="leading-4">Product updates</flux:heading>            <flux:text size="sm" class="mt-2">Learn about new features and products.</flux:text>        </div>    </flux:checkbox>    <flux:checkbox value="invitations">        <flux:checkbox.indicator />        <div class="flex-1">            <flux:heading class="leading-4">Event invitations</flux:heading>            <flux:text size="sm" class="mt-2">Invitatations to exclusive events.</flux:text>        </div>    </flux:checkbox></flux:checkbox.group>

胶囊样式

紧凑且圆润的复选框，看起来像标签或徽章。非常适合用于筛选、分类，或任何需要轻量选择项的场景。

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

分类

奇幻

科幻

恐怖

悬疑

言情

自传

惊悚

诗歌

少儿

<flux:checkbox.group wire:model="categories" label="Categories" variant="pills">    <flux:checkbox value="fantasy" label="Fantasy" />    <flux:checkbox value="science-fiction" label="Science fiction" />    <flux:checkbox value="horror" label="Horror" />    <flux:checkbox value="mystery" label="Mystery" />    <flux:checkbox value="romance" label="Romance" />    <flux:checkbox value="autobiography" label="Autobiography" />    <flux:checkbox value="thriller" label="Thriller" />    <flux:checkbox value="poetry" label="Poetry" />    <flux:checkbox value="children" label="Children" /></flux:checkbox.group>

按钮样式

按钮式复选框选项，看起来像工具栏。非常适合用于需要更突出视觉风格的切换控制和功能选择。

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

功能

通知

分析

备份

<flux:checkbox.group wire:model="features" label="Features" variant="buttons">    <flux:checkbox value="notifications" icon="bell" label="Notifications" />    <flux:checkbox value="analytics" icon="chart-bar" label="Analytics" />    <flux:checkbox value="backups" icon="cloud-arrow-up" label="Backups" /></flux:checkbox.group>

flux:checkbox

属性	描述
wire:model	将复选框绑定到 Livewire 属性。更多信息请参阅 wire:model 文档。
label	显示在复选框旁的标签文本。提供后会将复选框包裹在带有相邻标签的结构中。
description	显示在复选框下方的帮助文本。与 label 一起提供时，会出现在标签与复选框之间。
value	在组中使用时与复选框关联的值。复选框选中后，该值会包含在组的 wire:model 返回的数组中。
checked	将复选框设置为默认选中。
indeterminate	将复选框设置为不确定状态，以短横线取代勾选标记。适用于“全选”复选框，但只有部分条目被选中时。
disabled	阻止用户与复选框交互。
invalid	为复选框应用错误样式。

属性	描述
data-flux-checkbox	应用于根元素，用于样式与识别。
data-checked	在复选框被选中时应用。
data-indeterminate	在复选框处于不确定状态时应用。

flux:checkbox.group

属性	描述
wire:model	将复选框组绑定到 Livewire 属性。该值会是选中复选框值的数组。更多信息请参阅 wire:model 文档。
label	显示在复选框组上方的标签文本。提供后会将该组包裹在带有相邻 flux:label 组件的 flux:field 组件中。
description	显示在组标签下方的帮助文本。与 label 一起提供时，会位于标签和复选框之间。
variant	该组的视觉样式。选项包括：default、cards（专业版）、pills（专业版）、buttons（专业版）。
disabled	阻止用户与组内所有复选框交互。
invalid	为组内所有复选框应用错误样式。

插槽	描述
default	需要组合在一起的复选框。可以包含 flux:checkbox、flux:checkbox.all 以及其他元素。

flux:checkbox.all

一种用于控制组内所有复选框的特殊复选框。当全部复选框被选中时它会选中，全部取消时会取消，在仅部分选中时则显示为不确定状态。

属性	描述
label	显示在复选框旁的文本标签。
description	显示在复选框下方的帮助文本。
disabled	阻止用户与复选框交互。

复选框

相关组件

参考