Input

凹槽形态的文本输入框：纯黑填充、低对比度的描边、强调色光标。点击斜切块上几乎任何位置，都会聚焦到输入框。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/input

示例

基础

input-basic.tsx

import { Input } from "@/components/zero/input";export default function InputBasic() {  return (    <Input      placeholder="Search the board"      aria-label="Search the board"      className="max-w-xs"    />  );}

尺寸

input-sizes.tsx

import { Input } from "@/components/zero/input";export default function InputSizes() {  return (    <div className="grid w-full max-w-xs gap-4">      <Input size="sm" placeholder="Small" aria-label="Small" />      <Input size="md" placeholder="Medium" aria-label="Medium" />      <Input size="lg" placeholder="Large" aria-label="Large" />    </div>  );}

两端的图标或操作按钮

input-slots.tsx

import { useState } from "react";import {  ClearIcon,  EyeIcon,  EyeOffIcon,  SearchIcon,} from "@/components/zero/icons";import { Input, InputAction } from "@/components/zero/input";export default function InputSlots() {  const [query, setQuery] = useState("rail yards");  const [shown, setShown] = useState(false);  return (    <div className="grid w-full max-w-xs gap-4">      <Input        value={query}        onChange={(event) => setQuery(event.target.value)}        placeholder="Search the board"        aria-label="Search the board"        start={<SearchIcon />}        end={          query ? (            <InputAction aria-label="Clear" onClick={() => setQuery("")}>              <ClearIcon />            </InputAction>          ) : null        }      />      <Input        type={shown ? "text" : "password"}        defaultValue="lantern-42"        aria-label="Access key"        end={          <InputAction            aria-label={shown ? "Hide the key" : "Show the key"}            onClick={() => setShown((value) => !value)}          >            {shown ? <EyeOffIcon /> : <EyeIcon />}          </InputAction>        }      />    </div>  );}

无效与禁用状态

input-states.tsx

import { Input } from "@/components/zero/input";export default function InputStates() {  return (    <div className="grid w-full max-w-xs gap-4">      <Input defaultValue="no@" aria-invalid aria-label="Invalid" />      <Input placeholder="Disabled" disabled aria-label="Disabled" />    </div>  );}

行为

获得焦点时显示焦点框；焦点落在内部的 InputAction 上时同样如此。值无效时描边变为危险色：位于 Field 内时以 Field 的校验结果为准，独立使用时以 aria-invalid 为准。

className 作用于外层容器（宽度、外边距）；其余属性均传给 input 元素本身。

属性

Input

属性	类型	默认值	说明
size	"sm" \| "md" \| "lg"	"md"	高 32、40 或 52 px。
cut	"end" \| "start" \| "both" \| "none"	"end"	凹槽的斜切位置：末端、起始端、两端或不斜切。
start	ReactNode	—	文字前方的内容，通常是图标；输入框随之去掉该侧的内边距。
end	ReactNode	—	文字后方的内容：图标或 InputAction（清空、显示密码）。

另可传入 Base UI Input 的全部属性。

InputAction

属性	类型	默认值	说明
aria-label	string	—	必填。操作按钮仅含图标，需以此提供可访问名称。

另可传入 Base UI Button 的全部属性。