/ux
Components/Inputs/TextInput

TextInput

Inputs

Single-line text entry with label, description, and error states.

Standard text field for search queries, form fields, and filters. Supports three visual variants and three sizes. Left/right section slots accept icons or other inline nodes.

Usage

import { TextInput } from "nosible-ux"

export default function Example() {
  return <TextInput label="Signal keyword" placeholder="e.g. earnings call" />
}

Examples

Variants

With icon section

Error state

Accessibility

Renders an input element (type text). label generates a linked label element. When error is set the input receives aria-invalid="true" and the message is linked via aria-describedby.

Props

Name TypeDefaultDescription
description
string | undefined—Helper text below the input. Suppressed when `error` is present.
error
string | undefined—Validation error. Sets `aria-invalid` and renders Critical Red text.
label
string | undefined—Label rendered ALL-CAPS in Space Mono above the input.
leftSection
ReactNode—Node rendered inside the left inset of the input (icon, prefix).
rightSection
ReactNode—Node rendered inside the right inset of the input (icon, suffix).
size
"sm" | "md" | "lg" | undefined"md"Visual size of the control.
variant
"default" | "filled" | "outline" | undefined"default"Visual variant.
← All ComponentsGetting Started →