Components / Actions

Input

The console's text field, in the heights of the console buttons: sm (36px) beside an sm button, xs (28px) beside an xs one. inputClass() styles a <select> or any other field the same way.

OriginNew in the system

Import

tsx
import { Input, inputClass } from "@somnia-chain/ui"
// in a Next.js app, internal links use next/link:
import { Input, inputClass } from "@somnia-chain/ui/next"

Examples

Fields beside their buttons

examples/input/default.tsxShow code
tsx
import { buttonClass, Input, inputClass } from "@somnia-chain/ui"

export default function InputExample() {
  return (
    <div className="flex max-w-xl flex-col gap-5">
      <label className="flex flex-col gap-1.5">
        <span className="text-[12.5px] text-fg-2">Repository</span>
        <Input name="repo" placeholder="owner/name" className="w-full" />
      </label>
      <div className="flex flex-wrap items-center gap-2">
        <Input type="search" aria-label="Filter runs" placeholder="Filter runs" className="w-56" />
        <select aria-label="Range" defaultValue="24h" className={inputClass({ className: "w-36" })}>
          <option value="24h">Last 24 hours</option>
          <option value="7d">Last 7 days</option>
        </select>
        <button type="button" className={buttonClass({ size: "sm", variant: "secondary" })}>
          Apply
        </button>
      </div>
      <div className="flex flex-wrap items-center gap-2">
        <Input size="xs" aria-label="Reason" placeholder="Reason for stopping" className="w-56" />
        <button type="button" className={buttonClass({ size: "xs", variant: "danger" })}>
          Stop
        </button>
        <Input size="xs" aria-label="Budget" defaultValue="$400" disabled className="w-24" />
      </div>
    </div>
  )
}

Props

Input

PropTypeDefaultDescription
size"sm" | "xs""sm"sm is 36px tall, xs is 28px. Replaces the native size attribute.
classNamestring—Added to the field's classes. The field has no width of its own: give it one, e.g. w-full.
...props<input> attributes—Any other attribute, e.g. id, role, aria-* or a data-* test hook, goes on the <input>. So do value, placeholder, disabled and the event handlers.

inputClass(options)

PropTypeDefaultDescription
size"sm" | "xs""sm"Height and text size.
classNamestring—Appended.