Input

Lockness UI Component

DOCUMENTATION

Input

Text input component with consistent styling. Supports all standard HTML input types with proper focus states and accessibility features.

Installation

bash

deno run -A jsr:@lockness/ui add input

Usage

tsx

import { Input } from '@lockness/ui/components'

<Input type='text' placeholder='Enter your name' />

Props

Prop	Type	Default	Description
type	`'text' \| 'email' \| 'password' \| 'number' \| 'tel' \| 'url' \| 'search' \| 'date' \| 'time' \| 'datetime-local' \| 'month' \| 'week' \| 'file' \| 'hidden'`	`'text'`	Input type
name	`string`	-	Input name attribute
value	`string \| number`	-	Input value
placeholder	`string`	-	Placeholder text
disabled	`boolean`	`false`	Disable input
readonly	`boolean`	`false`	Read-only input
required	`boolean`	`false`	Required field
autocomplete	`string`	-	Autocomplete attribute
class	`string`	-	Additional CSS class names
id	`string`	-	Element id attribute

Input Types

Text (default)

tsx

<Input type='text' placeholder='Enter text' />

Email

tsx

<Input type='email' placeholder='you@example.com' />

Password

tsx

<Input type='password' placeholder='Enter password' />

Number

tsx

<Input type='number' placeholder='0' min='0' max='100' />

Search

tsx

<Input type='search' placeholder='Search...' />

Date & Time

tsx

<Input type="date" />
<Input type="time" />
<Input type="datetime-local" />
<Input type="month" />
<Input type="week" />

File

tsx

<Input type="file" />
<Input type="file" accept="image/*" />

Telephone & URL

tsx

<Input type="tel" placeholder="+1 (555) 000-0000" />
<Input type="url" placeholder="https://example.com" />

States

Disabled

tsx

<Input disabled placeholder='Disabled input' />

Read-only

tsx

<Input readonly value='Read-only value' />

Required

tsx

<Input required placeholder='Required field' />

Examples

With Label

tsx

<div class='space-y-2'>
    <Label for='email'>Email</Label>
    <Input id='email' type='email' placeholder='you@example.com' />
</div>

Form Group

tsx

<div class='space-y-4'>
    <div>
        <Label for='name'>Name</Label>
        <Input id='name' placeholder='Your name' required />
    </div>
    <div>
        <Label for='email'>Email</Label>
        <Input id='email' type='email' placeholder='you@example.com' required />
    </div>
    <div>
        <Label for='password'>Password</Label>
        <Input id='password' type='password' placeholder='••••••••' required />
    </div>
</div>

With Custom Width

tsx

<Input class="max-w-sm" placeholder="Limited width" />
<Input class="w-64" placeholder="Fixed width" />

With Error State

tsx

<div class='space-y-2'>
    <Label for='email'>Email</Label>
    <Input
        id='email'
        type='email'
        class='border-destructive focus-visible:ring-destructive'
        placeholder='Invalid email'
    />
    <p class='text-sm text-destructive'>Please enter a valid email address.</p>
</div>

Input with Button

tsx

<div class='flex gap-2'>
    <Input type='email' placeholder='Enter your email' class='flex-1' />
    <Button>Subscribe</Button>
</div>

Search Input

tsx

<div class='relative'>
    <svg
        class='absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground'
        xmlns='http://www.w3.org/2000/svg'
        viewBox='0 0 24 24'
        fill='none'
        stroke='currentColor'
        stroke-width='2'
    >
        <circle cx='11' cy='11' r='8' />
        <path d='m21 21-4.3-4.3' />
    </svg>
    <Input type='search' placeholder='Search...' class='pl-10' />
</div>

Accessibility

Uses semantic <input> element
Proper focus ring styling with focus-visible
Supports all standard input attributes (aria-*, required, etc.)
Placeholder text uses muted color for contrast
Disabled state has reduced opacity and blocked interactions

CSS Variables

css

@theme {
    --radius: 0.5rem;
    --input: 220 13% 91%;
    --background: 0 0% 100%;
    --muted-foreground: 220 9% 46%;
    --ring: 221 83% 53%;
    --ring-offset: 0 0% 100%;
}

Styling

The Input component includes:

40px height (h-10)
Full width by default (w-full)
Rounded corners using --radius
Border with --input color
Focus ring with offset
Disabled styling with opacity and cursor
File input styling for clean file inputs

Theming

The Input component can be fully customized using CSS variables. This allows you to adjust dimensions, colors, spacing, and borders to match your design system while maintaining consistent behavior across your application.

Available CSS Variables

Variable	Default	Description
`--input-height`	`2.5rem`	Height of the input field
`--input-padding-x`	`0.75rem`	Horizontal padding inside the input
`--input-padding-y`	`0.5rem`	Vertical padding inside the input
`--input-font-size`	`0.875rem`	Font size of the input text
`--input-border-radius`	`var(--radius)`	Border radius of the input corners
`--input-border-color`	`var(--input)`	Border color of the input
`--input-background`	`var(--background)`	Background color of the input

Theming Examples

Global Customization

Add these styles to your app.css to customize all Input components across your application:

css

:root {
    /* Larger inputs with more padding */
    --input-height: 3rem;
    --input-padding-x: 1rem;
    --input-padding-y: 0.75rem;
    --input-font-size: 1rem;

    /* Custom border styling */
    --input-border-radius: 0.375rem;
    --input-border-color: hsl(210 40% 80%);

    /* Dark mode theme */
    --input-background: hsl(222 47% 11%);
}

Local Overrides

Override theming for specific inputs using inline styles:

tsx

{/* Compact input */}
<Input
    placeholder='Compact'
    style={{
        '--input-height': '2rem',
        '--input-padding-x': '0.5rem',
        '--input-font-size': '0.75rem',
    }}
/>

{/* Large input with custom colors */}
<Input
    placeholder='Large and colorful'
    style={{
        '--input-height': '3.5rem',
        '--input-padding-x': '1.25rem',
        '--input-font-size': '1.125rem',
        '--input-border-color': 'hsl(260 100% 70%)',
        '--input-background': 'hsl(260 100% 95%)',
    }}
/>

{/* Minimal rounded input */}
<Input
    placeholder='Minimal'
    style={{
        '--input-border-radius': '9999px',
        '--input-padding-x': '1.5rem',
    }}
/>

BASIC INPUT

tsx

import { Input } from '@lockness/ui/components'

<Input type="text" placeholder="Enter your name" />
<Input type="email" placeholder="you@example.com" />
<Input type="password" placeholder="Enter password" />

WITH LABEL

Password

tsx

import { Input, Label } from '@lockness/ui/components'

<div class="space-y-2">
  <Label for="email">Email</Label>
  <Input id="email" type="email" placeholder="you@example.com" />
</div>

INPUT TYPES

Text

Number

Telephone

URL

Date

tsx

<Input type="text" placeholder="Text input" />
<Input type="number" placeholder="123" />
<Input type="tel" placeholder="+1 (555) 123-4567" />
<Input type="url" placeholder="https://example.com" />
<Input type="search" placeholder="Search..." />
<Input type="date" />

STATES

Disabled

Read-only

Required *

tsx

// Disabled
<Input placeholder="Disabled input" disabled />

// Read-only
<Input value="Read-only value" readonly />

// Required
<Input placeholder="Required field" required />

FILE INPUT

Upload File

tsx

<div class="space-y-2">
  <Label for="file">Upload File</Label>
  <Input id="file" type="file" />
</div>

CUSTOM STYLING

tsx

<Input class="max-w-sm" placeholder="Max width small" />
<Input class="max-w-xs" placeholder="Max width extra small" />

Edit this page