Pole tekstowe

import {
  Field,
  FieldDescription,

Input przechwytuje pojedynczy wiersz tekstu — imiona, adresy e-mail, zapytania wyszukiwania. Zbudowany na komponencie Base UI Input, cienkiej nakładce na natywny <input>, i ubrany w neobrutalistyczną recepturę: gruba ramka, twardy cień i kontrastowy obrys fokusu.

Sięgnij po ten komponent, gdy:

• Formularze logowania i rejestracji — pola e-maila, nazwy użytkownika i hasła w parze z Field i FieldLabel.
• Paski wyszukiwania — w jednej linii z Button albo z ikonami przez InputGroup.
• Strony płatności i ustawień — adresy, numery kart i pola profilu rozmieszczone w FieldGroup.

Instalacja#

pnpmnpmyarnbun
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
Kopiuj

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 }

Użycie#

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

Kopiuj<Input />

Przykłady#

Podstawowy#

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

export function InputBasic() {

Field#

Użyj Field, FieldLabel i FieldDescription, aby utworzyć pole z etykietą i opisem.

import {
  Field,
  FieldDescription,

Field Group#

Użyj FieldGroup, aby wyświetlić wiele bloków Field i budować formularze.

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

Wyłączony#

Użyj propa disabled, aby wyłączyć pole. Aby ostylować stan wyłączony, dodaj atrybut data-disabled do komponentu Field.

import {
  Field,
  FieldDescription,

Nieprawidłowy#

Użyj propa aria-invalid, aby oznaczyć pole jako nieprawidłowe. Aby ostylować stan nieprawidłowy, dodaj atrybut data-invalid do komponentu Field.

import {
  Field,
  FieldDescription,

Plik#

Użyj propa type="file", aby utworzyć pole wyboru pliku.

import {
  Field,
  FieldDescription,

W jednej linii#

Użyj Field z orientation="horizontal", aby utworzyć pole w jednej linii. Połącz z Button, aby utworzyć pole wyszukiwania z przyciskiem.

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

Siatka#

Użyj układu siatki, aby umieścić wiele pól obok siebie.

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

Wymagany#

Użyj atrybutu required, aby oznaczyć pola wymagane.

import {
  Field,
  FieldDescription,

Badge#

Użyj Badge w etykiecie, aby wyróżnić zalecane pole.

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

Input Group#

Aby dodać ikony, tekst lub przyciski wewnątrz pola, użyj komponentu InputGroup. Zobacz komponent Input Group, aby zobaczyć więcej przykładów.

import { InfoIcon } from "lucide-react"

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

Button Group#

Aby dodać przyciski do pola, użyj komponentu ButtonGroup. Zobacz komponent Button Group, aby zobaczyć więcej przykładów.

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

Formularz#

Pełny przykład formularza z wieloma polami, elementem select i przyciskiem.

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

RTL#

Aby włączyć obsługę RTL w Neobrutalism, zobacz przewodnik konfiguracji RTL.

"use client"

import * as React from "react"

Dostępność#

Input renderuje natywny element <input>, więc edycja z klawiatury, fokus i wysyłanie formularza nie wymagają żadnego okablowania ARIA. Reszta należy do ciebie:

• Etykietuj każde pole. Łącz je z FieldLabel (albo z <label htmlFor>) — placeholder nie jest etykietą; znika podczas pisania i nie zawsze jest ogłaszany.
• Powiąż tekst błędu. Ustaw aria-invalid na polu i skieruj aria-describedby na id swojego FieldError lub FieldDescription, aby czytniki ekranu odczytały komunikat razem z polem.
• Dobierz właściwe type i autocomplete. type="email" plus autocomplete="email" daje właściwą klawiaturę mobilną i autouzupełnianie.