Vibe UI
Initializing Vibe UI System...
Vibe UI

Input

Displays a form input field or a component that looks like an input field.

Input

Displays a form input field or a component that looks like an input field.

Preview

Installation

pnpm dlx vibe-ui-kit@latest add input label button checkbox
💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: label, button, checkbox

Examples

Explore form composition examples including file upload, disabled states, layouts with labels/buttons, error validations, forms, and floating labels.

File Input
Disabled State
With Action Button
Validation Error
Please enter a valid email address.
Floating Label Types

Themes

Explore style variants side-by-side.

Default
Bottom Border
Glassmorphic
Filled
Neon Glow
Retro Neobrutalism
Cyberpunk

Premium Login Form

A ready-made, copy-pasteable login form layout constructed with standard Vibe UI components using the default theme.

Welcome Back

Enter your credentials below to access your premium workspace

Forgot password?

Or continue with

Props

Input

PropTypeDefaultDescription
variant'default' | 'bottom' | 'glass' | 'filled' | 'glow' | 'retro' | 'cyberpunk''default'The visual aesthetic theme to apply to the input field.
errorbooleanfalseToggles the validation error/invalid border styling.

FloatingInput

PropTypeDefaultDescription
labelstringundefinedThe text label that floats up on focus/value.
variant'default' | 'bottom' | 'glass' | 'filled''default'The visual aesthetic theme layout for the floating input.
errorbooleanfalseToggles the validation error/invalid border styling.

Contributors

JS
Jenish Sabhadiya

Theme Customizer

8px
@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}
Changes apply instantly to this documentation workspace.
Input | Vibe UI