Input

Extended Features

• Size variants — xs, sm, default, and lg with the same dimensions and spacing as the Button component
• Commit value — onCommitValue fires when the user blurs the field or presses ↵, separate from onChange while typing

Commit value

Use onChange for every keystroke and onCommitValue when the user finishes editing (blur or ↵). The handler receives a synthetic change event with the current value, matching the shape of onChange. Repeated commits with the same value are skipped until the field changes again.

Key bindings

Custom props

Install

Configure your registry in components.json:

{
  "registries": {
    "@uxio": "https://ui.uxio.dev/r/styles/{style}/{name}.json"
  }
}

Then run:

npx shadcn@latest add @uxio/input

Usage

"use client"

import * as React from "react"

import { Input } from "@/components/ui/input"

export function NameField() {
  const [text, setText] = React.useState("")
  const [committed, setCommitted] = React.useState("")

  return (
    <Input
      value={text}
      placeholder="Your name"
      onChange={(event) => setText(event.target.value)}
      onCommitValue={(event) => setCommitted(event.target.value)}
    />
  )
}

Examples

Commit value

Size Variants

Use the size prop to match input dimensions with the Button component. Sizes align across all styles.

Extra Small (xs)

Small (sm)

Default

Large (lg)