Input

Text input field supporting various types (text, email, password, number). Fully accessible with keyboard navigation.

Installation
# Install @opencosmos/ui to use Input
pnpm add @opencosmos/ui
Preview
Loading preview...
Customize
— Input type
— Placeholder text
— Disables the input
Usage
Import
import { Input } from '@opencosmos/ui';
Example
<Input>
  Content
</Input>
Eject
Copy this component into your project for full customization

API Reference

PropTypeDefaultDescription
typetext | email | password | number | tel | url | search"text"Input type
placeholdertext"Enter text..."Placeholder text
disabledbooleanfalseDisables the input

Accessibility

  • Uses semantic HTML input element
  • Supports all standard input types (text, email, password, etc.)
  • Keyboard navigable with Tab key
  • Properly associates with Label component via htmlFor/id
  • Supports disabled state with appropriate styling
  • Respects system focus indicators

Examples

Default
Email
Password
Disabled
With Label

Code Examples

Basic Usage

Simple text input

import { Input } from "@opencosmos/ui"

<Input type="text" placeholder="Enter text..." />

With Label

Input with associated label

import { Input, Label } from "@opencosmos/ui"

<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>

Form Integration

Input in a form with validation

import { Input, Label, Button } from "@opencosmos/ui"

<form className="space-y-4">
  <div className="grid w-full items-center gap-1.5">
    <Label htmlFor="name">Name</Label>
    <Input type="text" id="name" placeholder="John Doe" />
  </div>
  <div className="grid w-full items-center gap-1.5">
    <Label htmlFor="email">Email</Label>
    <Input type="email" id="email" placeholder="john@example.com" />
  </div>
  <Button type="submit">Submit</Button>
</form>