Input

Input component with adjustable cyberpunk intensity. Features glowing focus states, corner accents, and terminal cursor at higher intensity levels.

npx shadcn@latest add https://ui.farstar-studio.com/r/input.json

Preview

Variants

variant

intensity

inputSize

Props

PropTypeDefaultDescription
variant"default" | "terminal""default"The visual style of the input
intensity"subtle" | "medium" | "full""subtle"Cyberpunk visual intensity level
animatedbooleantrueEnable/disable animations (respects prefers-reduced-motion)
inputSize"default" | "sm" | "lg""default"The size of the input
labelstring—Label text displayed above the input
errorstring—Error message to display below the input
startIconReactNode—Icon to display at the start of the input
endIconReactNode—Icon to display at the end of the input

Usage

Basic Input

tsx
1import { Input } from "@/registry/zero/ui/input"
2 
3export function Example() {
4  return (
5    <Input 
6      label="Username"
7      placeholder="Enter your handle..."
8    />
9  )
10}

Intensity Levels

tsx
1import { Input } from "@/registry/zero/ui/input"
2 
3export function Example() {
4  return (
5    <div className="space-y-4">
6      <Input intensity="subtle" placeholder="Subtle..." />
7      <Input intensity="medium" placeholder="Medium..." />
8      <Input intensity="full" placeholder="Full..." />
9    </div>
10  )
11}

With Error State

tsx
1import { Input } from "@/registry/zero/ui/input"
2 
3export function Example() {
4  return (
5    <Input 
6      intensity="medium"
7      label="Access Code"
8      error="Access denied: Invalid credentials"
9      placeholder="Enter code..."
10    />
11  )
12}

Terminal Style

tsx
1import { Input } from "@/registry/zero/ui/input"
2 
3export function Example() {
4  return (
5    <Input 
6      variant="terminal"
7      intensity="full"
8      label="Command"
9      placeholder="> Enter command..."
10    />
11  )
12}