Input

Поля ввода с лейблами, подсказками и валидацией.

Демонстрация

Использование

import { Input } from "@viai/kit"

// Базовое использование
<Input placeholder="Введите текст..." />

// С лейблом
<Input label="Email" placeholder="example@mail.com" />

// С подсказкой
<Input 
  label="Пароль" 
  type="password" 
  hint="Минимум 8 символов" 
/>

// С ошибкой
<Input 
  label="Email" 
  error="Неверный формат email" 
  defaultValue="invalid"
/>

Props

Prop	Тип	По умолчанию	Описание
label	string	-	Лейбл над полем
hint	string	-	Подсказка под полем
error	string	-	Сообщение об ошибке
type	string	"text"	Тип поля (text, password, email...)

Примеры

Форма входа

import { Input, Button } from "@viai/kit"

function LoginForm() {
  return (
    <form className="space-y-4">
      <Input 
        label="Email" 
        type="email" 
        placeholder="example@mail.com" 
      />
      <Input 
        label="Пароль" 
        type="password" 
        hint="Минимум 8 символов"
      />
      <Button type="submit" className="w-full">
        Войти
      </Button>
    </form>
  )
}

Валидация

const [email, setEmail] = useState("")
const [error, setError] = useState("")

const validateEmail = (value: string) => {
  if (!value.includes("@")) {
    setError("Введите корректный email")
  } else {
    setError("")
  }
}

<Input
  label="Email"
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  onBlur={() => validateEmail(email)}
  error={error}
/>