Invoerveld

Een tekstveld met één regel voor inlogvensters, zoekbalken en afrekenformulieren — met de neobrutalistische stijl met dikke randen en scherpe schaduwen.

import {
  Field,
  FieldDescription,

De input legt één regel tekst vast — namen, e-mailadressen, zoekopdrachten. Gebouwd op de Base UI Input-component, een dunne wrapper om de native <input>, en gestoken in het neobrutalistische recept: een dikke rand, een scherpe schaduw en een focus-outline met hoog contrast.

Ideaal voor:

Inlog- en registratieformulieren — velden voor e-mail, gebruikersnaam en wachtwoord, gecombineerd met Field en FieldLabel.
Zoekbalken — inline met een Button, of met iconen via InputGroup.
Checkout- en instellingenpagina’s — adressen, kaartnummers en profielvelden opgemaakt in een FieldGroup.

Installatie


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

Kopieer en plak de volgende code in je project.

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 }

Werk de importpaden bij zodat ze overeenkomen met je projectconfiguratie.

Gebruik

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

<Input />

Voorbeelden

Basis

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

export function InputBasic() {

Field

Gebruik Field, FieldLabel en FieldDescription om een invoer met een label en beschrijving te maken.

import {
  Field,
  FieldDescription,

Field Group

Gebruik FieldGroup om meerdere Field-blokken te tonen en formulieren te bouwen.

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

Uitgeschakeld

Gebruik de prop disabled om de invoer uit te schakelen. Voeg het attribuut data-disabled toe aan de component Field om de uitgeschakelde toestand te stylen.

import {
  Field,
  FieldDescription,

Ongeldig

Gebruik de prop aria-invalid om de invoer als ongeldig te markeren. Voeg het attribuut data-invalid toe aan de component Field om de ongeldige toestand te stylen.

import {
  Field,
  FieldDescription,

Bestand

Gebruik de prop type="file" om een bestandsinvoer te maken.

import {
  Field,
  FieldDescription,

Inline

Gebruik Field met orientation="horizontal" om een inline invoer te maken. Combineer met Button om een zoekinvoer met een knop te maken.

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

Raster

Gebruik een rasterindeling om meerdere invoeren naast elkaar te plaatsen.

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

Verplicht

Gebruik het attribuut required om verplichte invoeren aan te geven.

import {
  Field,
  FieldDescription,

Badge

Gebruik Badge in het label om een aanbevolen veld te benadrukken.

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

Input Group

Om pictogrammen, tekst of knoppen binnen een invoer toe te voegen, gebruik je de component InputGroup. Zie de component Input Group voor meer voorbeelden.

import { InfoIcon } from "lucide-react"

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

Button Group

Om knoppen aan een invoer toe te voegen, gebruik je de component ButtonGroup. Zie de component Button Group voor meer voorbeelden.

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

Formulier

Een volledig formuliervoorbeeld met meerdere invoeren, een select en een knop.

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

RTL

Om RTL-ondersteuning in Neobrutalism in te schakelen, zie de RTL-configuratiegids.

"use client"

import * as React from "react"

Toegankelijkheid

Input rendert een native <input>, dus bewerken met het toetsenbord, focus en formulierverzending hebben geen ARIA-bedrading nodig. Wat overblijft, is aan jou:

Geef elke input een label. Koppel hem aan een FieldLabel (of een <label htmlFor>) — een placeholder is geen label; hij verdwijnt zodra je typt en wordt niet betrouwbaar voorgelezen.
Koppel de fouttekst. Zet aria-invalid op de input en laat aria-describedby wijzen naar het id van je FieldError of FieldDescription, zodat schermlezers de melding samen met het veld voorlezen.
Kies het juiste type en autocomplete. type="email" plus autocomplete="email" levert het juiste mobiele toetsenbord en autofill op.