Input

The Input component is a flexible form control that supports various styles, states, and features. It’s designed to handle different types of text input while maintaining consistency and accessibility.

<script>
    import { Input } from '@rebel-ui';
</script>

<Input 
    label="Username"
    placeholder="Enter your username"
/>

Username

Features

Multiple style variants
Different sizes
Support for icons
Error and success states
Full accessibility support
Comprehensive autocomplete options
Various input types

Examples

Basic Usage

The most basic usage of the Input component.

<Input 
    label="Default Input"
    placeholder="Type something..."
/>

Default Input

Input Variants

The Input component comes with three style variants.

<div class="flex flex-col gap-4">
    <Input 
        variant="default"
        label="Default Variant"
        placeholder="Standard input style"
    />
    
    <Input 
        variant="soft"
        label="Soft Variant"
        placeholder="Elevated style with shadow"
    />
    
    <Input 
        variant="underline"
        label="Underline Variant"
        placeholder="Minimal style with bottom border"
    />
</div>

Default Variant

Soft Variant

Underline Variant

Input Types

Support for various HTML input types.

<div class="flex flex-col gap-4">
    <Input 
        type="email"
        label="Email"
        placeholder="Enter your email"
        bind:value={email}
    />
    
    <Input 
        type="password"
        label="Password"
        placeholder="Enter your password"
        bind:value={password}
    />
    
    <Input 
        type="number"
        label="Number"
        placeholder="Enter a number"
        bind:value={number}
    />
</div>

Password

Number

Sizes

Available in three sizes.

<div class="flex flex-col gap-4">
    <Input 
        size="sm"
        label="Small Input"
        placeholder="Small size"
    />
    
    <Input 
        size="md"
        label="Medium Input"
        placeholder="Medium size (default)"
    />
    
    <Input 
        size="lg"
        label="Large Input"
        placeholder="Large size"
    />
</div>

Small Input

Medium Input

Large Input

States

Various states for different scenarios.

<div class="flex flex-col gap-4">
    <Input 
        label="Required Input"
        placeholder="This field is required"
        required
    />
    
    <Input 
        label="Disabled Input"
        value="This input is disabled"
        disabled
    />
    
    <Input 
        label="Read Only Input"
        value="This is read only"
        readonly
    />
    
    <Input 
        label="Error State"
        value="Invalid input"
        error="Please enter a valid value"
    />
    
    <Input 
        label="Success State"
        value="Valid input"
        success
    />
</div>

Required Input*

Disabled Input

Read Only Input

Error State

Please enter a valid value

Success State

With Icons

Support for left and right icons.

<div class="flex flex-col gap-4">
    <Input 
        label="Search with Icon"
        placeholder="Search..."
        icon={() => `
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
            </svg>
        `}
        iconPosition="left"
    />
    
    <Input 
        label="Email with Icon"
        type="email"
        placeholder="Enter email"
        icon={() => `
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
                <polyline points="22,6 12,13 2,6"></polyline>
            </svg>
        `}
        iconPosition="right"
    />
</div>

Search with Icon

Email with Icon

Props

Prop	Type	Default	Description
`type`	`'text' \\| 'password' \\| 'email' \\| 'number' \\| 'tel' \\| 'url' \\| 'search'`	`'text'`	Type of input
`variant`	`'default' \\| 'soft' \\| 'underline'`	`'default'`	Visual style variant
`size`	`'sm' \\| 'md' \\| 'lg'`	`'md'`	Size of the input
`value`	`string`	`''`	Input value
`placeholder`	`string`	`''`	Placeholder text
`label`	`string`	`''`	Label text
`disabled`	`boolean`	`false`	Whether the input is disabled
`required`	`boolean`	`false`	Whether the input is required
`readonly`	`boolean`	`false`	Whether the input is read-only
`error`	`string`	`''`	Error message
`success`	`boolean`	`false`	Success state
`name`	`string`	`''`	Input name
`id`	`string`	`''`	Input ID
`maxlength`	`number`	`undefined`	Maximum length
`minlength`	`number`	`undefined`	Minimum length
`pattern`	`string`	`undefined`	Input pattern
`icon`	`() => string`	`undefined`	Function returning SVG string
`iconPosition`	`'left' \\| 'right'`	`'left'`	Position of the icon

Autocomplete Values

The input supports all standard HTML autocomplete values:

Basic Controls

off - Disable autocomplete
on - Enable browser autocomplete

User Information

name - Full name
email - Email address
username - Username
new-password - New password creation
current-password - Existing password
one-time-code - OTP/2FA codes

Address Information

street-address - Full street address
address-line1, address-line2, address-line3 - Address lines
country, country-name - Country
postal-code - ZIP/Postal code
address-level1 through address-level4 - State/Province/Region

Payment Information

cc-name - Name on card
cc-number - Card number
cc-exp - Expiration date
cc-exp-month, cc-exp-year - Expiration parts
cc-csc - Security code
cc-type - Card type
transaction-currency, transaction-amount - Payment details

Personal Information

bday, bday-day, bday-month, bday-year - Birthday
sex - Gender
language - Language preference

Contact Information

tel - Phone number
tel-country-code, tel-area-code - Phone number parts
tel-local, tel-extension - Local number parts
url - Website URL

Accessibility

The Input component follows WAI-ARIA guidelines:

Labels are properly associated with inputs
Error messages are announced by screen readers
Required fields are marked both visually and semantically
Focus states are clearly visible
Disabled states are properly handled

CSS Variables

Variable	Default	Description
`--rebel-surface`	`#ffffff`	Input background color
`--rebel-surface-secondary`	`#f3f4f6`	Secondary background color
`--rebel-border`	`#e5e7eb`	Border color
`--rebel-text-primary`	`#111827`	Primary text color
`--rebel-text-secondary`	`#4b5563`	Secondary text color
`--rebel-text-tertiary`	`#9ca3af`	Placeholder text color
`--rebel-brand`	`#3b82f6`	Focus and active states
`--rebel-error`	`#ef4444`	Error state color
`--rebel-success`	`#22c55e`	Success state color
`--rebel-disabled-bg`	`#f3f4f6`	Disabled background
`--rebel-focus-ring`	`rgba(59, 130, 246, 0.5)`	Focus ring color