第三章：基础组件

3.2 输入框组件

概述

Shadcn的输入框组件（Input）是基于HTML原生<input>元素的增强封装，提供开箱即用的样式一致性、状态管理和无障碍支持。它完美集成Tailwind CSS，同时支持深度定制。

基础用法

import { Input } from "@/components/ui/input"

function SearchBar() {
  return <Input type="search" placeholder="Search..." />
}

核心属性

属性类型说明
typestringHTML5输入类型（text/email等）
disabledboolean禁用状态
classNamestring自定义Tailwind类名

高级功能

1. 复合输入框

import { Input } from "@/components/ui/input"
import { Search } from "lucide-react"

function SearchInput() {
  return (
    <div className="relative">
      <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4" />
      <Input className="pl-10" placeholder="Search docs..." />
    </div>
  )
}

2. 表单集成示例

import { useForm } from "react-hook-form"
import { Input } from "@/components/ui/input"

export function ProfileForm() {
  const { register } = useForm()
  
  return (
    <form>
      <Input 
        {...register("username")}
        placeholder="Username"
        className="mb-4"
      />
      <Input
        {...register("email")}
        type="email"
        placeholder="Email"
      />
    </form>
  )
}

样式定制

通过Tailwind CSS实现多种变体：

<Input 
  className="border-rose-500 focus-visible:ring-rose-300"
  placeholder="Error state"
/>

最佳实践

  1. 标签关联：始终使用<label>配合htmlFor属性
  2. 错误状态：结合aria-invalid属性实现无障碍错误提示
  3. 类型选择：根据场景选择正确的type（如password/number）

常见问题

Q：如何实现密码可见切换？

import { useState } from "react"
import { Input } from "@/components/ui/input"
import { Eye, EyeOff } from "lucide-react"

function PasswordInput() {
  const [showPassword, setShowPassword] = useState(false)
  
  return (
    <div className="relative">
      <Input 
        type={showPassword ? "text" : "password"} 
        placeholder="Password"
      />
      <button 
        type="button"
        onClick={() => setShowPassword(!showPassword)}
        className="absolute right-3 top-1/2 -translate-y-1/2"
      >
        {showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
      </button>
    </div>
  )
}

注意：所有输入框组件默认支持暗黑模式，无需额外配置

Last Updated::