Input

The Input component provides you with form input fields with validation and error handling.

Import

import { Input } from '@nostromo/ui-core'
// or
import { Input } from '@nostromo/ui-core/input'

Usage

import { Input } from '@nostromo/ui-core'
 
export default function Example() {
  return (
    <Input 
      type="email" 
      placeholder="Enter your email"
      label="Email"
    />
  )
}

Live Examples

Live Example

☀️

Copy

Storybook →

View Code

import { Input } from '@nostromo/ui-core' export default function InputDefault() { return <Input placeholder="Type something..." /> }...

Live Example

☀️

Copy

Storybook →

View Code

import { Input } from '@nostromo/ui-core' export default function InputExamples() { return ( <div className="space-y-4"> <Input placeholder="Type something..." /> <Input type="email" placeholder="Email" /> <Input type="password" placeholder="Password" /> <Input disabled placeholder="Disabled" /> </div>...

Live Example

☀️

Copy

Storybook →

View Code

import { Input } from '@nostromo/ui-core' export default function InputWithError() { return ( <div className="space-y-4"> <Input placeholder="Email" error helperText="Please enter a valid email address" /> <Input placeholder="Password" type="password" error /> </div> ) }...

With Label

import { Input, Label } from '@nostromo/ui-core'
 
export default function InputWithLabel() {
  return (
    <div className="space-y-2">
      <Label htmlFor="email">Email</Label>
      <Input id="email" type="email" placeholder="your@email.com" />
    </div>
  )
}

Props

Prop	Type	Default	Required	Description
`type`	`"text" \| "email" \| "password" \| "number" \| "tel" \| "url" \| "search"`	`"text"`	No	HTML input type
`variant`	`"default" \| "error" \| "success"`	`"default"`	No	Visual variant (auto-set based on error/success)
`inputSize`	`"sm" \| "default" \| "lg"`	`"default"`	No	Size of the input
`label`	`string`	`undefined`	No	Label text displayed above input
`helperText`	`string`	`undefined`	No	Helper text displayed below input
`error`	`boolean`	`false`	No	Whether the input has an error state
`success`	`boolean`	`false`	No	Whether the input has a success state
`placeholder`	`string`	`undefined`	No	Placeholder text
`disabled`	`boolean`	`false`	No	Whether the input is disabled
`value`	`string`	`undefined`	No	Controlled input value
`onChange`	`(event: React.ChangeEvent<HTMLInputElement>) => void`	`undefined`	No	Change event handler
`id`	`string`	`undefined`	No	Input ID (auto-generated if not provided)
`name`	`string`	`undefined`	No	Input name for form submission
`required`	`boolean`	`false`	No	Whether the input is required
`className`	`string`	`undefined`	No	Additional CSS classes

Standard HTML Input Props

The Input component extends all standard HTML input attributes, including:

autoComplete, autoFocus, maxLength, minLength, pattern, readOnly
aria-* attributes for accessibility
data-* attributes for custom data
All other standard HTML input attributes

Separator Textarea