显示侧边栏

字段

使用标签、描述和验证来封装输入元素。

探索输入组件 ->

邮箱

<flux:field>    <flux:label>Email</flux:label>    <flux:input wire:model="email" type="email" />    <flux:error name="email" /></flux:field>

简写属性

由于完整使用字段组件可能会很冗长和重复，flux 中的所有表单控件都允许您直接传递 label 和 description 参数。在底层，它们会自动包装在带有错误组件的字段中。

<flux:input wire:model="email" label="Email" type="email" />

带尾随描述

将字段描述直接放置在输入框下方。

密码

必须至少8个字符长，包含一个大写字母、一个数字和一个特殊字符。

<flux:field>    <flux:label>Password</flux:label>    <flux:input type="password" />    <flux:error name="password" />    <flux:description>Must be at least 8 characters long, include an uppercase letter, a number, and a special character.</flux:description></flux:field><!-- Alternative shorthand syntax... --><flux:input    type="password"    label="Password"    description:trailing="Must be at least 8 characters long, include an uppercase letter, a number, and a special character."/>

带徽章

徽章允许您为字段添加额外信息，例如在可能不被期望的情况下标记为“必需”或“可选”。

邮箱

电话号码

<flux:field>    <flux:label badge="Required">Email</flux:label>    <flux:input type="email" required />    <flux:error name="email" /></flux:field><flux:field>    <flux:label badge="Optional">Phone number</flux:label>    <flux:input type="phone" placeholder="(555) 555-5555" mask="(999) 999-9999"  />    <flux:error name="phone" /></flux:field>

分割布局

在同一行中水平显示多个字段。

名

姓

<div class="grid grid-cols-2 gap-4">    <flux:input label="First name" placeholder="River" />    <flux:input label="Last name" placeholder="Porzio" /></div>

字段集

使用字段集和图例组件对相关字段进行分组。

收货地址

街道地址第1行

街道地址第2行

城市

省/州

邮政编码

国家

<flux:fieldset>    <flux:legend>Shipping address</flux:legend>    <div class="space-y-6">        <flux:input label="Street address line 1" placeholder="123 Main St" class="max-w-sm" />        <flux:input label="Street address line 2" placeholder="Apartment, studio, or floor" class="max-w-sm" />        <div class="grid grid-cols-2 gap-x-4 gap-y-6">            <flux:input label="City" placeholder="San Francisco" />            <flux:input label="State / Province" placeholder="CA" />            <flux:input label="Postal / Zip code" placeholder="12345" />            <flux:select label="Country">                <option selected>United States</option>                <!-- ... -->            </flux:select>        </div>    </div></flux:fieldset>

输入框

用于收集用户输入的文本字段

文本域

用于较长表单内容的多行文本输入区域

开关

用于进行选择的可切换输入控件

参考

flux:field

一个容器组件，为带有标签、描述和错误消息的表单输入提供结构。

属性	描述
variant	视觉样式变体。选项：block，inline。默认：block。

插槽	描述
default	表单控件元素（输入框、选择框等）及其相关的标签、描述和错误消息。

属性	描述
data-flux-field	应用于根元素以进行样式设置和标识。

flux:label

属性	描述
badge	作为徽章显示的可选文本（例如“必需”、“可选”）。

插槽	描述
default	标签文本内容。

flux:description

插槽	描述
default	描述性文本内容。

flux:error

属性	描述
name	要显示验证错误的字段名称。
message	自定义错误消息内容（可选）。
bag	获取错误的错误包。默认：default。

插槽	描述
default	自定义错误消息内容（可选）。

flux:fieldset

属性	描述
legend	字段集的标题文本。
description	字段集的可选描述文本。

插槽	描述
default	分组的表单字段及其相关铭文。

flux:legend

插槽	描述
default	字段集的标题文本。

字段

相关组件

参考