显示侧边栏

输入框

通过各种形式的文本输入捕获用户数据。

用户名

这将被公开显示。

<flux:field>    <flux:label>Username</flux:label>    <flux:description>This will be publicly displayed.</flux:description>    <flux:input />    <flux:error name="username" /></flux:field>

简写

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

<flux:input label="Username" description="This will be publicly displayed." />

类名定向

与其他表单组件不同，Flux 的输入组件由两个底层元素组成：一个 input 元素和一个包装器 div。包装器 div 用于在图标位置添加内边距。

这通常是没问题的，但是，如果您需要将类传递给输入组件并将它们直接应用于输入元素，您可以使用 class:input 属性而不是简单的 class：

<flux:input class="max-w-xs" class:input="font-mono" />

类型

在不同情况下使用浏览器的各种输入类型：text、email、password 等。

邮箱

密码

日期

<flux:input type="email" label="Email" /><flux:input type="password" label="Password" /><flux:input type="date" max="2999-12-31" label="Date" />

文件

Flux 为文件上传提供了一个特殊的输入组件。它是原生 input[type="file"] 元素的简单包装器。

标志

附件

<flux:input type="file" wire:model="logo" label="Logo"/><flux:input type="file" wire:model="attachments" label="Attachments" multiple />

更小

使用 size 属性使输入框的高度更紧凑。

<flux:input size="sm" placeholder="Filter by..." />

禁用

通过禁用输入框来阻止用户与其交互。

邮箱

<flux:input disabled label="Email" />

只读

在表单提交期间锁定输入框很有用。

<flux:input readonly variant="filled" />

无效

向用户发出输入内容无效的信号。

<flux:input invalid />

输入遮罩

通过使用 Alpine 的遮罩插件为特殊情况限制文本内容的格式。

<flux:input mask="(999) 999-9999" value="7161234567" /><flux:input mask:dynamic="$money($input)" value="1234.56" />

图标

在表单输入框内部附加或前置图标。

<flux:input icon="magnifying-glass" placeholder="Search orders" /><flux:input icon:trailing="credit-card" placeholder="4444-4444-4444-4444" /><flux:input icon:trailing="loading" placeholder="Search transactions" />

图标按钮

在输入框内部附加按钮以提供相关功能。

<flux:input placeholder="Search orders">    <x-slot name="iconTrailing">        <flux:button size="sm" variant="subtle" icon="x-mark" class="-mr-1" />    </x-slot></flux:input><flux:input type="password" value="password">    <x-slot name="iconTrailing">        <flux:button size="sm" variant="subtle" icon="eye" class="-mr-1" />    </x-slot></flux:input>

可清除、可复制和可查看的输入框

Flux 提供了三个特殊的输入属性来配置常见的输入按钮行为。clearable 用于清除内容，copyable 用于复制内容，viewable 用于切换密码可见性。

<flux:input placeholder="Search orders" clearable /><flux:input type="password" value="password" viewable /><flux:input icon="key" value="FLUX-1234-5678-ABCD-EFGH" readonly copyable />

键盘提示

提示用户可以在此输入框中使用的键盘快捷键。

⌘K

<flux:input kbd="⌘K" icon="magnifying-glass" placeholder="Search..."/>

作为按钮

要使用 button 元素渲染输入框，请将 "button" 传递给 as 属性。

<flux:input as="button" placeholder="Search..." icon="magnifying-glass" kbd="⌘K" />

带按钮

在输入元素的开头或结尾附加按钮。

<flux:input.group>    <flux:input placeholder="Post title" />    <flux:button icon="plus">New post</flux:button></flux:input.group><flux:input.group>    <flux:select class="max-w-fit">        <flux:select.option selected>USD</flux:select.option>        <!-- ... -->    </flux:select>    <flux:input placeholder="$99.99" /></flux:input.group>

文本前缀和后缀

在表单输入框内附加文本。

https://

.brand.com

<flux:input.group>    <flux:input.group.prefix>https://</flux:input.group.prefix>    <flux:input placeholder="example.com" /></flux:input.group><flux:input.group>    <flux:input placeholder="chunky-spaceship" />    <flux:input.group.suffix>.brand.com</flux:input.group.suffix></flux:input.group>

输入组标签

如果您想在带有标签的表单字段中使用输入组，您需要将输入组包装在 field 组件中。

网站

https://

<flux:field>    <flux:label>Website</flux:label>    <flux:input.group>        <flux:input.group.prefix>https://</flux:input.group.prefix>        <flux:input wire:model="website" placeholder="example.com" />    </flux:input.group>    <flux:error name="website" /></flux:field>

字段

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

文本域

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

自动完成

带有预测建议的增强文本输入

参考

flux:input

属性	描述
wire:model	将输入框绑定到 Livewire 属性。有关更多信息，请参阅 wire:model 文档。
label	显示在输入框上方的标签文本。提供时，将输入框包装在 flux:field 组件中，并带有相邻的 flux:label 组件。请参阅字段组件。
description	显示在输入框上方的帮助文本。与 label 一起提供时，出现在 flux:field 包装器内的标签和输入框之间。请参阅字段组件。
description:trailing	显示在输入框下方的帮助文本。与 label 一起提供时，出现在 flux:field 包装器内的标签和输入框下方。请参阅字段组件。
placeholder	输入框为空时显示的占位符文本。
size	输入框的大小。选项：sm、xs。
variant	视觉样式变体。选项：filled。默认：outline。
disabled	阻止用户与输入框交互。
readonly	使输入框为只读。
invalid	对输入框应用错误样式。
multiple	对于文件输入，允许选择多个文件。
mask	使用 Alpine 的遮罩插件的输入遮罩模式。示例：99/99/9999。
mask:dynamic	使用 Alpine 的遮罩插件的动态输入遮罩模式。示例：$money($input)。
icon	显示在输入框开始位置的图标名称。
icon:trailing	显示在输入框结尾位置的图标名称。
kbd	显示在输入框结尾位置的键盘快捷键提示。
clearable	如果为 true，在输入框有内容时显示清除按钮。
copyable	如果为 true，显示复制按钮来复制输入框的内容（仅 https）。
viewable	对于密码输入，显示一个切换按钮来显示/隐藏密码。
as	将输入框渲染为不同的元素。选项：button。默认：input。
class:input	直接应用于输入元素而不是包装器的 CSS 类。

插槽	描述
icon	显示在输入框开始位置的自定义内容（例如图标）。
icon:leading	显示在输入框开始位置的自定义内容（例如图标）。
icon:trailing	显示在输入框结尾位置的自定义内容（例如按钮）。

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

flux:input.group

插槽	描述
default	输入组内容，通常包含输入框和前缀/后缀元素。

flux:input.group.prefix

插槽	描述
default	显示在输入框之前的内容（例如图标、文本、按钮）。

flux:input.group.suffix

插槽	描述
default	显示在输入框之后的内容（例如图标、文本、按钮）。

有关更多信息，请参阅字段组件文档。

输入框

相关组件

参考