Hover CardInput OTP
Get Started
Introduction
Components
Accordion
Badge
Button
Card
Checkbox
Command
Dialog
Dropdown Menu
Input
Select
Switch
Table
Tabs
Toast
Tooltip
Forms
Controlled Input
Field Arrays
Submit
Validation

Input

Displays an input field for user text entry.

text
email
password
number

#Installation

bunx --bun barefoot add input

#Usage

1import { Input } from "@/components/ui/input"23function InputDemo() {4  return (5    <div className="flex flex-col gap-4 max-w-sm">6      <Input type="text" placeholder="Text input" />7      <Input type="email" placeholder="Email address" />8      <Input type="password" placeholder="Password" />9      <Input type="number" placeholder="Number" />10      <Input disabled placeholder="Disabled input" />11    </div>12  )13}

#Examples

#Input Types

1import { Input } from "@/components/ui/input"23function InputTypes() {4  return (5    <div className="flex flex-col gap-2 max-w-sm">6      <Input type="text" placeholder="Text input" />7      <Input type="email" placeholder="Email address" />8      <Input type="password" placeholder="Password" />9      <Input type="number" placeholder="Number" />10    </div>11  )12}

#Disabled

1import { Input } from "@/components/ui/input"23function InputDisabled() {4  return (5    <div className="flex flex-col gap-2 max-w-sm">6      <Input disabled placeholder="Disabled input" />7      <Input disabled value="Disabled with value" />8    </div>9  )10}

#Value Binding

You typed: 

1"use client"23import { createSignal } from "@barefootjs/dom"4import { Input } from "@/components/ui/input"56function InputBinding() {7  const [value, setValue] = createSignal("")89  return (10    <div className="max-w-sm space-y-2">11      <Input12        value={value()}13        onInput={(e) => setValue(e.target.value)}14        placeholder="Type something..."15      />16      <p className="text-sm text-muted-foreground">17        You typed: {value()}18      </p>19    </div>20  )21}

#Focus State

Status: Not focused

1"use client"23import { createSignal } from "@barefootjs/dom"4import { Input } from "@/components/ui/input"56function InputFocus() {7  const [focused, setFocused] = createSignal(false)89  return (10    <div className="max-w-sm space-y-2">11      <Input12        onFocus={() => setFocused(true)}13        onBlur={() => setFocused(false)}14        placeholder="Focus me..."15      />16      <p className="text-sm text-muted-foreground">17        {focused() ? "Input is focused" : "Input is not focused"}18      </p>19    </div>20  )21}

#API Reference

PropTypeDefaultDescription
type'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url''text'The type of the input.
placeholderstring-Placeholder text shown when input is empty.
valuestring-The controlled value of the input.
disabledbooleanfalseWhether the input is disabled.
classNamestring-Additional CSS class names.
onInput(e: InputEvent) => void-Event handler called on each input change.
onChange(e: Event) => void-Event handler called when input value changes and loses focus.
onBlur(e: FocusEvent) => void-Event handler called when input loses focus.
onFocus(e: FocusEvent) => void-Event handler called when input gains focus.