Поле введення

Однорядкове текстове поле для введення логіна, рядки пошуку та форми оформлення замовлення — з товстими рамками та різкими тінями у стилі необруталізму.

import {
  Field,
  FieldDescription,

Input захоплює один рядок тексту — імена, email, пошукові запити. Побудований на компоненті Base UI Input, тонкій обгортці над нативним <input>, і вбраний за рецептом необруталізму: товста рамка, різка тінь і висококонтрастний outline фокусу.

Коли це стане в пригоді:

Форми входу та реєстрації — поля email, username і password у парі з Field і FieldLabel.
Рядки пошуку — поряд із Button або з іконками через InputGroup.
Checkout і налаштування — адреси, номери карток і поля профілю в FieldGroup.

Встановлення


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/input.json
npx shadcn@latest add https://neobrutalism.com/r/base/input.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/input.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/input.json

Скопіюйте та вставте наведений нижче код у свій проєкт.

components/ui/input.tsx

import * as React from "react"

import { cn } from "@/lib/utils"

function Input({ className, type, ...props }: React.ComponentProps<"input">) {
  return (
    <input
      type={type}
      data-slot="input"
      className={cn(
        "h-8 w-full min-w-0 rounded border-2 bg-input px-3 py-2 text-sm shadow-sm transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive",
        className
      )}
      {...props}
    />
  )
}

export { Input }

Оновіть шляхи імпорту відповідно до налаштувань вашого проєкту.

Використання

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

<Input />

Приклади

Базовий

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

export function InputBasic() {

Field

Використовуйте Field, FieldLabel та FieldDescription, щоб створити поле з міткою та описом.

import {
  Field,
  FieldDescription,

Field Group

Використовуйте FieldGroup, щоб показати кілька блоків Field і створювати форми.

import { Button } from "@/components/ui/button"
import {
  Field,

Вимкнено

Використовуйте проп disabled, щоб вимкнути поле. Щоб стилізувати вимкнений стан, додайте атрибут data-disabled до компонента Field.

import {
  Field,
  FieldDescription,

Невалідний

Використовуйте проп aria-invalid, щоб позначити поле як невалідне. Щоб стилізувати невалідний стан, додайте атрибут data-invalid до компонента Field.

import {
  Field,
  FieldDescription,

Файл

Використовуйте проп type="file", щоб створити поле вибору файлу.

import {
  Field,
  FieldDescription,

Вбудований

Використовуйте Field з orientation="horizontal", щоб створити вбудоване поле. Поєднайте з Button, щоб створити поле пошуку з кнопкою.

import { Button } from "@/components/ui/button"
import { Field } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

Сітка

Використовуйте сіткову розкладку, щоб розмістити кілька полів поряд.

import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

Обов'язковий

Використовуйте атрибут required, щоб позначити обов'язкові поля.

import {
  Field,
  FieldDescription,

Badge

Використовуйте Badge у мітці, щоб виділити рекомендоване поле.

import { Badge } from "@/components/ui/badge"
import { Field, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

Input Group

Щоб додати іконки, текст або кнопки всередині поля, використовуйте компонент InputGroup. Більше прикладів — у компоненті Input Group.

import { InfoIcon } from "lucide-react"

import { Field, FieldLabel } from "@/components/ui/field"

Button Group

Щоб додати кнопки до поля, використовуйте компонент ButtonGroup. Більше прикладів — у компоненті Button Group.

import { Button } from "@/components/ui/button"
import { ButtonGroup } from "@/components/ui/button-group"
import { Field, FieldLabel } from "@/components/ui/field"

Форма

Повний приклад форми з кількома полями, елементом select і кнопкою.

import { Button } from "@/components/ui/button"
import {
  Field,

RTL

Щоб увімкнути підтримку RTL у Neobrutalism, перегляньте посібник з налаштування RTL.

"use client"

import * as React from "react"

Доступність

Input рендерить нативний <input>, тож редагування з клавіатури, фокус і відправлення форми не потребують ARIA-обв’язки. Далі — ваша відповідальність:

Підписуйте кожне поле. Поєднуйте з FieldLabel (або <label htmlFor>) — placeholder не є міткою; він зникає під час введення й ненадійно оголошується.
Пов’язуйте текст помилки. Ставте aria-invalid на input і вказуйте aria-describedby на id вашого FieldError або FieldDescription, щоб програми зчитування з екрана читали повідомлення разом із полем.
Обирайте правильні type і autocomplete. type="email" плюс autocomplete="email" дає коректну мобільну клавіатуру та автозаповнення.