Input

A styled input component that extends the HTML input element.

Usage

import { Input } from "@rhinolabs/ui"

export default function InputDemo() {
  return <Input type="text" placeholder="Enter your name" />
}

Examples

Basic Input

A simple text input field.

<Input placeholder="Email" type="email" />

With Labels

Input with associated label.

<div className="grid w-full max-w-sm items-center gap-1.5">
  <label htmlFor="email">Email</label>
  <Input type="email" id="email" placeholder="Email" />
</div>

Input Types

Different input types for various data types.

<div className="flex w-full max-w-sm flex-col gap-4">
  <Input type="email" placeholder="Email" />
  <Input type="password" placeholder="Password" />
  <Input type="date" />
  <Input type="file" />
  <Input type="number" placeholder="Age" />
  <Input type="tel" placeholder="Phone number" />
  <Input type="url" placeholder="URL" />
  <Input type="search" placeholder="Search..." />
</div>

Disabled State

Input in disabled state.

<Input disabled type="email" placeholder="Email" />

Props

The Input component extends the HTML input element props.

Prop	Type	Default	Description
type	string	"text"	HTML input type
disabled	boolean	false	Whether the input is disabled
placeholder	string	-	Placeholder text

Design Considerations

• Use appropriate input types
• Provide clear placeholder text
• Include descriptive labels
• Show validation states
• Consider mobile input methods

Accessibility

• Associates with labels
• Supports keyboard navigation
• Provides clear focus states
• Includes ARIA attributes
• Handles error states