Input

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

Live Examples

Storybook: components-input--default

Storybook: components-input--all-variants

Storybook: components-input--with-error

Code Examples

Live Example

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

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	Description
`type`	`string`	`"text"`	Input type
`placeholder`	`string`	-	Placeholder text
`disabled`	`boolean`	`false`	Whether input is disabled
`value`	`string`	-	Input value
`onChange`	`function`	-	Change handler

Separator Textarea