Barefoot.js
Barefoot.js
View on GitHub
Introduction
Accordion
Badge
Button
Card
Checkbox
Counter
Dialog
Dropdown
Input
Select
Switch
Tabs
Toast
Tooltip
Controlled Input
Field Arrays
Submit
Validation

Input

Displays an input field for user text entry.

1<Input inputPlaceholder="Enter text..." />

#Installation

1bunx barefoot add input

#Usage

1import { Input } from '@/components/ui/input'23export default function Page() {4  return <Input placeholder="Enter text..." />5}

#Examples

#Input Types

1<Input inputType="text" inputPlaceholder="Text input" />2<Input inputType="email" inputPlaceholder="Email address" />3<Input inputType="password" inputPlaceholder="Password" />4<Input inputType="number" inputPlaceholder="Number" />

#Disabled & Read-only

1<Input inputDisabled inputPlaceholder="Disabled input" />2<Input inputReadOnly inputValue="Read-only value" />

#Value Binding

You typed: 

1import { createSignal } from '@barefootjs/dom'23const [value, setValue] = createSignal('')45<Input6  inputValue={value()}7  onInput={(e) => setValue(e.target.value)}8  inputPlaceholder="Type something..."9/>10<p>You typed: {value()}</p>

#Focus State

Status: Not focused

1<Input onFocus={() => setFocused(true)} onBlur={() => setFocused(false)} />

#API Reference

PropTypeDefaultDescription
inputType'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url''text'The type of the input.
inputPlaceholderstring-Placeholder text shown when input is empty.
inputValuestring-The controlled value of the input.
inputDisabledbooleanfalseWhether the input is disabled.
inputReadOnlybooleanfalseWhether the input is read-only.
onInput(e: Event) => void-Event handler called on each input change.
onChange(e: Event) => void-Event handler called when input value changes and loses focus.
onBlur(e: Event) => void-Event handler called when input loses focus.
onFocus(e: Event) => void-Event handler called when input gains focus.