Input

Text input allows users to enter and edit text. Supports labels, validation, helper text, and reactive state binding.

Basic Examples

Simple inputs with various configurations

// Dynamic import of the Input component

const { default: Input } = await import('/components/data-input/input.js');

const { tags, $ } = Lightview;
const { div } = tags;

// 1. Basic input
const basic = Input({ 
    placeholder: 'Basic input' 
});

// 2. Input with label and helper
const withLabel = Input({ 
    label: 'Email Address',
    type: 'email',
    placeholder: 'you@example.com',
    helper: 'We will never share your email.'
});

// 3. Input with color
const withColor = Input({ 
    label: 'Primary Color',
    placeholder: 'Styled input',
    color: 'primary'
});

// 4. Required input
const requiredInput = Input({ 
    label: 'Username',
    placeholder: 'Enter username',
    required: true
});

// Insert all examples
$('#demo').insert(
    div({ class: 'space-y-4' }, basic, withLabel, withColor, requiredInput)
);

Reactive Example

Two-way binding with signals and live validation


const { default: Input } = await import('/components/data-input/input.js');

const { signal, tags, $ } = Lightview;
const { div, p, span } = tags;

// Signal for two-way binding
const username = signal('');

// Validation function
const validateUsername = (val) => {
    if (!val) return 'Username is required';
    if (val.length < 3) return 'Username must be at least 3 characters';
    if (!/^[a-zA-Z0-9_]+$/.test(val)) return 'Only letters, numbers, and underscores allowed';
    return null;
};

// Reactive input with validation
const reactiveDemo = div({ class: 'space-y-4' },
    Input({ 
        label: 'Username',
        placeholder: 'Enter your username...',
        value: username,
        validate: validateUsername,
        required: true
    }),
    p({ class: 'text-sm' }, 
        span({ class: 'opacity-70' }, 'Current value: '),
        span({ class: 'font-mono text-primary' }, () => username.value || '(empty)')
    ),
    p({ class: 'text-sm' }, 
        () => {
            const error = validateUsername(username.value);
            return error 
                ? span({ class: 'text-error' }, '✗ ' + error)
                : span({ class: 'text-success' }, '✓ Username is valid!');
        }
    )
);

$('#demo').insert(reactiveDemo);

Props

Prop Type Default Description
type string 'text' Input type (text, password, email, number, etc.)
value string | signal - Input value (reactive with signals)
defaultValue string '' Default value for uncontrolled mode
placeholder string - Placeholder text
label string - Label text displayed above input
helper string - Helper text displayed below the input
error string | function - Error message or reactive error function
validate function - Validation function: (value) => errorMessage | null
color string - 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
size string 'md' 'xs' | 'sm' | 'md' | 'lg'
ghost boolean false Ghost style (no background)
disabled boolean false Disable the input
required boolean false Mark as required field (shows asterisk)
onChange function - Callback when value changes: (value, event) => void
onBlur function - Callback when input loses focus
useShadow boolean * Render in Shadow DOM. *Follows global initComponents() setting

Sizes

Colors

With Label (Fieldset Pattern)

Email Address

We'll never share your email.

For more examples and styling options, see the DaisyUI Input documentation.