Input 输入框
接受标准 HTML 属性的原生单行文本输入组件
用法
import { Input } from '@lenso/ui';此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";
import { Input } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";
// HeroUI v3.2.6, e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e, Apache-2.0.const styles = stylex.create({ field: { width: 256 } });export function Basic() { return <Input aria-label="Name" xstyle={styles.field} placeholder="Enter your name" />;}Local adaptation source above. Derived from HeroUI v3.2.6 source.
校验、标签与错误消息请参阅 TextField。
示例
变体
Input 组件支持两种视觉变体：
primary（默认）- 标准样式带阴影，适用于大多数场景secondary- 低强调变体无阴影，适用于 Surface 组件内
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Input } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({ root: { display: "flex", width: 240, flexDirection: "column", gap: 8 },});export function Variants() { return ( <div {...stylex.props(styles.root)}> <Input fullWidth placeholder="Primary input" variant="primary" /> <Input fullWidth placeholder="Secondary input" variant="secondary" /> </div> );}Local adaptation source above. Derived from HeroUI v3.2.6 source.
表面样式
在 Surface 内使用时，请使用 variant="secondary" 以应用适合 Surface 背景的低强调变体。
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Input, Surface } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({ root: { display: "flex", height: 180, width: 280, alignItems: "center", justifyContent: "center", borderRadius: 24, backgroundColor: "var(--surface)", padding: 16, },});export function OnSurface() { return ( <Surface xstyle={styles.root}> <Input fullWidth placeholder="Your name" variant="secondary" /> </Surface> );}Local adaptation source above. Derived from HeroUI v3.2.6 source.
宽度充满
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Input } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({ root: { width: 400 } });export function FullWidth() { return ( <div {...stylex.props(styles.root)}> <Input fullWidth placeholder="Full width input" /> </div> );}Local adaptation source above. Derived from HeroUI v3.2.6 source.
输入类型
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Input, Label } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({ root: { display: "flex", width: 320, flexDirection: "column", gap: 16 }, field: { display: "flex", flexDirection: "column", gap: 4 },});export function Types() { return ( <div {...stylex.props(styles.root)}> <div {...stylex.props(styles.field)}> <Label htmlFor="input-type-email">Email</Label> <Input id="input-type-email" placeholder="[email protected]" type="email" /> </div> <div {...stylex.props(styles.field)}> <Label htmlFor="input-type-number">Age</Label> <Input id="input-type-number" min={0} placeholder="30" type="number" /> </div> <div {...stylex.props(styles.field)}> <Label htmlFor="input-type-password">Password</Label> <Input id="input-type-password" placeholder="••••••••" type="password" /> </div> </div> );}Local adaptation source above. Derived from HeroUI v3.2.6 source.
受控组件
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Input } from "@lenso/ui";import * as React from "react";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({ root: { display: "flex", width: 320, flexDirection: "column", gap: 8 }, value: { paddingInline: 4, fontSize: 14, color: "var(--muted)" },});export function Controlled() { const [value, setValue] = React.useState("heroui.com"); return ( <div {...stylex.props(styles.root)}> <Input aria-label="Domain" placeholder="domain" value={value} onValueChange={setValue} /> <span {...stylex.props(styles.value)}>https://{value || "your-domain"}</span> </div> );}Local adaptation source above. Derived from HeroUI v3.2.6 source.
自定义样式
Tailwind CSS
此预览复用英文版适配，不代表中文源示例已完成本地实现。
"use client";// Adapted from HeroUI v3.2.6 (e385ac202b2cdb94b1bf6fa76d32c31c8259cc5e), Apache-2.0.import { Input } from "@lenso/ui";import * as stylex from "@stylexjs/stylex";const styles = stylex.create({ field: { width: 256, borderRadius: 12, borderWidth: 1, borderStyle: "solid", borderColor: "color-mix(in oklab, var(--border) 80%, transparent)", backgroundColor: "var(--default)", color: "var(--foreground)", "::placeholder": { color: "var(--muted)" }, },});export function CustomStyles() { return ( <Input aria-label="Search projects" xstyle={styles.field} placeholder="Search projects..." /> );}Local adaptation source above. Derived from HeroUI v3.2.6 source.
全局 CSS
基础类 .input 驱动每个实例。使用 @layer components 一次性覆盖。
@layer components { .input { @apply rounded-lg border border-border bg-surface px-4 py-2 text-sm shadow-sm transition-colors;
&:hover, &[data-hovered="true"] { @apply bg-surface-secondary border-border/80; }
&:focus-visible, &[data-focus-visible="true"] { @apply border-accent ring-2 ring-accent/20; }
&[data-invalid="true"] { @apply border-danger bg-danger-soft text-danger; } }}样式参考
HeroUI 遵循 BEM 方法论，确保组件变体与状态可复用且易于自定义。
CSS 类
基础类 [!toc]
.input– 原生 input 元素样式
交互状态
- Hover：
:hover或[data-hovered="true"] - Focus Visible：
:focus-visible或[data-focus-visible="true"] - Invalid：
[data-invalid="true"]（与aria-invalid同步） - Disabled：
:disabled或[aria-disabled="true"] - Read Only：
[aria-readonly="true"]
API 参考
Input
Input 接受所有标准 HTML <input> 属性，以及以下 props：
| Prop | 类型 | 默认值 | 描述 |
|---|---|---|---|
className | string | - | 与组件样式合并的 Tailwind 类 |
type | string | "text" | 输入类型（text、email、password、number 等） |
value | string | - | 受控值 |
defaultValue | string | - | 非受控初始值 |
onChange | (event: React.ChangeEvent<HTMLInputElement>) => void | - | 变化处理函数 |
placeholder | string | - | 占位文本 |
disabled | boolean | false | 是否禁用 |
readOnly | boolean | false | 是否只读 |
required | boolean | false | 是否必填 |
name | string | - | 表单提交时的 name |
autoComplete | string | - | 浏览器自动完成提示 |
maxLength | number | - | 最大字符数 |
minLength | number | - | 最小字符数 |
pattern | string | - | 校验用正则模式 |
min | number | string | - | 最小值（number/date 输入） |
max | number | string | - | 最大值（number/date 输入） |
step | number | string | - | 步进间隔（number 输入） |
fullWidth | boolean | false | 是否占满容器宽度 |
variant | "primary" | "secondary" | "primary" | 视觉变体。primary 为默认带阴影样式；secondary 为低强调无阴影，适用于 Surface 内 |
校验 props 如 isInvalid、isRequired 与错误处理，请使用 TextField 并将 Input 作为子组件。