PrimitiveAvailable

Input

Text field with visible focus, disabled states, and an accessible error signal.

Student name

Use the same name shown in your profile.

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/input.json

Import the component into your project and keep the source code under your control.

tsx

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

export function Example() {
  return <Input aria-label="Your name" placeholder="Type your name" />
}

Visual options included in the component’s official API.

Appearance, behavior and keyboard checks.

Rest · focus with TabFilledInvalidEnter a complete email address.Disabled

Rest, filled, focus, invalid and disabled. Invalid fields use aria-invalid and an associated message, not color alone.
Hover never validates a field. The application decides when to show errors.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
type	HTMLInputTypeAttribute	text	Defines the native input type.
aria-invalid	boolean \| grammar \| spelling	false	Activates the visual error state.
disabled	boolean	false	Disables editing and focus.

Rules that should remain intact when adapting the component to a product.

Every Input needs a visible label or aria-label.

Associate error messages using aria-describedby.

Do not use a placeholder as a permanent replacement for a label.