版本：^2.8.0

双重身份验证、邮箱验证码、PIN 码输入——OTP 输入框已经无处不在。我们认为 Flux 也应该把它们处理得足够优雅。

这就是 OTP Input：一个用于通过多个独立输入框采集一次性密码（One-Time Password, OTP）的组件。下面一起来看看。

<flux:otp wire:model="code" length="6" />

自动提交

添加 submit="auto" 后，当所有输入框都被填写完成时，表单会自动提交——完全不需要提交按钮。非常适合对体验流畅度和速度要求很高的验证流程。

<flux:otp wire:model="code" length="6" submit="auto" />

不仅仅是数字

需要字母数字混合的验证码或 PIN 吗？mode 属性可以满足你的需求。将其设置为 alphanumeric 可用于序列号或许可证密钥；使用 private 则可以遮盖像 PIN 码这样的敏感值。

<!-- 许可证密钥 -->
<flux:otp wire:model="licenseKey" length="10" mode="alphanumeric" />
<!-- PIN 码 -->
<flux:otp wire:model="pin" length="4" private />

自定义布局

使用 separators 和 groups 来匹配你的设计需求。非常适合电话号码、信用卡号或任何需要分组显示的格式：

<flux:otp wire:model="code">
    <flux:otp.group>
        <flux:otp.input />
        <flux:otp.input />
        <flux:otp.input />
    </flux:otp.group>
    <flux:otp.separator />
    <flux:otp.group>
        <flux:otp.input />
        <flux:otp.input />
        <flux:otp.input />
    </flux:otp.group>
</flux:otp>

智能输入行为

一如既往，我们投入了大量精力，确保这个组件是世界一流的。

• 智能粘贴：粘贴完整验证码后，组件会自动将字符分配到所有输入框中——无需逐个输入。

• 智能导航：方向键可在输入框之间移动，退格键会回跳并清除前一个输入框内容，输入字符后自动跳到下一个输入框。

• 自动填充支持：第一个输入框默认带有 autocomplete="one-time-code"，因此浏览器和密码管理器可以自动从短信或验证器应用中建议填入验证码。

可访问性

当然，我们也确保该组件在键盘导航、焦点管理和合适的 ARIA 标签方面都符合预期，这样依赖屏幕阅读器的用户也能顺畅使用。每个输入框都会告知自己在序列中的位置以及期望的总位数。

查看 OTP Input 文档以获取更多示例和完整的 API 参考。

版本：^2.7.1

AI 无处不在，对话式界面已经成了新常态。我们觉得，是时候让 Flux 拥有一个专为消息输入而生的组件了。

这就是 Composer：一个可配置的消息输入组件，支持操作按钮和富文本功能。下面一起来看看。

<flux:composer wire:model="prompt" placeholder="How can I help you today?">
    <x-slot name="actionsLeading">
        <flux:button size="sm" variant="subtle" icon="paper-clip" />
    </x-slot>

    <x-slot name="actionsTrailing">
        <flux:button type="submit" size="sm" variant="primary" icon="paper-airplane" />
    </x-slot>
</flux:composer>

两种布局

默认情况下，操作按钮位于输入框下方的单独一行中。添加 inline 属性即可将它们放到输入框旁边，形成更紧凑的布局——非常适合单行输入场景。

<flux:composer inline rows="1" ...>
    ...
</flux:composer>

富文本

需要格式化能力？只需在 input 插槽中传入一个编辑器组件，就可以将默认的 textarea 换成完整的富文本编辑器。

<flux:composer wire:model="prompt" rows="3" ...>
    <x-slot name="input">
        <flux:editor variant="borderless" toolbar="bold italic bullet ordered | link" />
    </x-slot>
    ...
</flux:composer>

提交行为

默认情况下，按下 Cmd/Ctrl + Enter 会提交表单。若想要类似聊天的体验，让 Enter 直接发送消息，只需添加 submit="enter" 即可。

<flux:composer submit="enter" ...>
    ...
</flux:composer>

高度控制

通过 rows 设置初始高度，并用 max-rows 限制最大高度。输入内容增多时，输入框会自动变高，到达最大高度后则变为可滚动。

<flux:composer rows="4" max-rows="8" ...>
    ...
</flux:composer>

可访问性

当然，我们也花了大量精力来确保该组件在键盘导航、焦点行为以及正确的 aria-label 等方面都符合预期，这样依赖屏幕阅读器的用户也能同样顺畅地使用它。

查看 Composer 文档以了解更多示例和完整的 API 参考。

版本 ^2.6.0

介绍时间选择器组件——当你需要用户选择特定时间时使用。非常适合预约安排、按时间范围筛选，或任何需要精确时间选择的场景。

组件处理了所有复杂性：12/24 小时制、时间间隔、不可用时段、键盘导航，以及完善的本地化。

<flux:time-picker wire:model="appointmentTime" />

输入或按钮触发

可选择按钮触发（打开时间选择下拉菜单），或输入框触发（提供原生时间输入，并可选配下拉增强）：

<flux:time-picker type="button" />
<flux:time-picker type="input" />

如果你想要纯原生体验，输入框变体甚至可通过 :dropdown="false" 完全禁用下拉。

了解触发类型 →

控制时间间隔

使用 interval 属性设置显示时间之间的间隔。默认是 30 分钟，但你可以使用任意数值：

<flux:time-picker interval="15" />  <!-- 15 分钟间隔 -->
<flux:time-picker interval="60" />  <!-- 每小时 -->

最小值、最大值与不可用时间

使用 min 和 max 边界限制可选时间——非常适合营业时间或基于时间的约束：

<flux:time-picker min="09:00" max="17:00" />

还提供了便捷的 “now” 简写：

<flux:time-picker min="now" />  <!-- 仅未来时间 -->

需要屏蔽特定时间或时间段？使用 unavailable 属性禁用已被预约或不可用的时段：

<flux:time-picker unavailable="03:00,04:00,05:30-07:29" />

查看更多约束选项 →

多选时间

使用 multiple 属性允许用户选择多个时间：

<flux:time-picker multiple wire:model="availableTimes" />

自动本地化

时间选择器会自动使用浏览器的区域设置确定时间格式，但你可以覆盖它：

<flux:time-picker time-format="12-hour" />
<flux:time-picker time-format="24-hour" />
<flux:time-picker locale="ja-JP" />

细节

与 Flux 中的每个组件一样，我们面面俱到：

友好键盘操作：使用方向键完全导航，Enter 选择，Escape 关闭。屏幕阅读器会播报所有状态变化和可用选项。

智能默认：选择器会打开到当前已选时间；若未选择，则打开到当前时间。必要时可通过 open-to 覆盖。

无缝集成：与 label、description、badge 等标准字段属性配合，实现自动字段包装。

浏览时间选择器文档 →