输入框

一个功能齐全、可高度定制的输入框组件，支持多种类型、状态和样式，适用于各种表单场景。

安装

npx

npx hb-design-cli add input

预览

浏览并体验不同样式和状态的输入框组件。

使用示例

组件

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

组件源码

组件


import React from 'react';

export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
  variant?: 'default' | 'outline' | 'filled';
  size?: 'sm' | 'md' | 'lg';
}

export const Inputs = React.forwardRef<HTMLInputElement, InputProps>(
  ({ className, variant = 'default', size = 'md', ...props }, ref) => {
    const baseClasses = 'w-full rounded-md font-medium transition-all focus-visible:outline-none border-2 focus-visible:border-blue-500/70  disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50';
    
    const variantClasses = {
      default: "bg-transparent border-input border",
      outline: "bg-transparent border-input border focus-visible:border-blue-500/70 ",
      filled: "bg-muted border-transparent focus-visible:bg-background focus-visible:border-blue-500/70  "
    };
    
    const sizeClasses = {
      sm: "h-9 px-2 text-sm",
      md: "h-10 px-3 text-base",
      lg: "h-12 px-4 text-lg"
    };
    

    const placeholderClasses = "placeholder:text-muted-foreground";
    

    const selectionClasses = "selection:bg-primary selection:text-primary-foreground";
    
    const classes = (
      [baseClasses].filter(Boolean).join(" "),
      variantClasses[variant],
      sizeClasses[size],
      placeholderClasses,
      selectionClasses,
      className
    );

    return (
      <input
        ref={ref}
        className={classes}
        {...props}
      />
    );
  }
);

Inputs.displayName = "Input";

属性说明

属性名	类型	默认值	说明
type	string	text	输入框类型
placeholder	string	-	占位文本
value	string	-	输入值
onChange	function	-	值变化回调
disabled	boolean	false	是否禁用
aria-invalid	boolean	false	错误状态
className	string	-	自定义样式