Input

import {
  Field,
  FieldDescription,

Input menangkap satu baris teks — nama, email, kueri pencarian. Dibangun di atas komponen Base UI Input, pembungkus tipis di atas <input> natif, dan dibalut resep neobrutalis: garis tepi tebal, bayangan pekat, dan outline fokus berkontras tinggi.

Gunakan komponen ini saat:

• Formulir autentikasi dan pendaftaran — kolom email, nama pengguna, dan kata sandi yang dipasangkan dengan Field dan FieldLabel.
• Bilah pencarian — sebaris dengan Button, atau dengan ikon lewat InputGroup.
• Halaman checkout dan pengaturan — alamat, nomor kartu, dan kolom profil yang ditata dalam FieldGroup.

Instalasi#

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
Salin

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 }

Penggunaan#

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

Salin<Input />

Contoh#

Dasar#

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

export function InputBasic() {

Field#

Gunakan Field, FieldLabel, dan FieldDescription untuk membuat input dengan label dan deskripsi.

import {
  Field,
  FieldDescription,

Field Group#

Gunakan FieldGroup untuk menampilkan beberapa blok Field dan membangun formulir.

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

Nonaktif#

Gunakan prop disabled untuk menonaktifkan input. Untuk memberi gaya pada keadaan nonaktif, tambahkan atribut data-disabled ke komponen Field.

import {
  Field,
  FieldDescription,

Tidak Valid#

Gunakan prop aria-invalid untuk menandai input sebagai tidak valid. Untuk memberi gaya pada keadaan tidak valid, tambahkan atribut data-invalid ke komponen Field.

import {
  Field,
  FieldDescription,

File#

Gunakan prop type="file" untuk membuat input file.

import {
  Field,
  FieldDescription,

Sebaris#

Gunakan Field dengan orientation="horizontal" untuk membuat input sebaris. Padukan dengan Button untuk membuat input pencarian dengan tombol.

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

Grid#

Gunakan tata letak grid untuk menempatkan beberapa input berdampingan.

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

Wajib#

Gunakan atribut required untuk menunjukkan input yang wajib diisi.

import {
  Field,
  FieldDescription,

Badge#

Gunakan Badge pada label untuk menyorot bidang yang direkomendasikan.

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

Input Group#

Untuk menambahkan ikon, teks, atau tombol di dalam input, gunakan komponen InputGroup. Lihat komponen Input Group untuk contoh lainnya.

import { InfoIcon } from "lucide-react"

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

Button Group#

Untuk menambahkan tombol ke input, gunakan komponen ButtonGroup. Lihat komponen Button Group untuk contoh lainnya.

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

Formulir#

Contoh formulir lengkap dengan beberapa input, sebuah select, dan sebuah tombol.

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

RTL#

Untuk mengaktifkan dukungan RTL di Neobrutalism, lihat panduan konfigurasi RTL.

"use client"

import * as React from "react"

Aksesibilitas#

Input merender <input> natif, jadi pengeditan lewat keyboard, fokus, dan pengiriman formulir tidak memerlukan penyambungan ARIA. Sisanya menjadi tanggung jawab Anda:

• Beri label setiap input. Pasangkan dengan FieldLabel (atau <label htmlFor>) — placeholder bukan label; ia hilang begitu pengguna mengetik dan tidak selalu diumumkan.
• Kaitkan teks kesalahan. Setel aria-invalid pada input dan arahkan aria-describedby ke id FieldError atau FieldDescription Anda agar pembaca layar membacakan pesannya bersama kolom tersebut.
• Pilih type dan autocomplete yang tepat. type="email" plus autocomplete="email" menghadirkan keyboard seluler yang sesuai beserta isi-otomatis.