Text field · Pixel UI component

<PxInput />· loading

Trytype half an email address, then click away.

Playground

Change a prop and the component re-renders. Props marked remounts set an initial value, so the component starts over.

Loading <PxInput />

Props

labellive

typelive

requiredlive

hintlive

disabledlive

React

<PxInput
  label="Work email"
  type="email"
  required
  placeholder="you@company.com"
  hint="We’ll send the invite here"
  error="Enter a valid email address"
/>

Installation

pnpm dlx shadcn@latest add @lumesec/px-input

First timeRegister the @lumesec registry once, or install by URL+

Adds @lumesec to your components.json:

pnpm dlx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json

Or skip the setup and install by URL:

npx shadcn@latest add https://elements.lumesec.ai/r/px-input.json

Usage

px-input-example.tsx

import { PxInput } from "@/components/lumesec/px-input";

export function Example() {
  return (
    <PxInput
      name="email"
      label="Work email"
      type="email"
      required
      placeholder="you@company.com"
      hint="We’ll send the invite here"
      error="Enter a valid email address"
    />
  );
}

A labelled field whose underline lights up from the caret outwards. Validation runs on blur: an invalid value shakes the field, scatters the pixels and rolls in the message; a valid one draws a check.

API reference

Props

Also accepts every prop of <div> (React.ComponentProps<"div">), spread onto the root element.

valueTypestring

Controlled text. Use with onValueChange.

defaultValueTypestringDefault""

Initial text when uncontrolled. A form reset restores it.

labelTypeReact.ReactNode

Label above the field, linked to the input. Nothing is rendered when empty.

hintTypestring

Help text under the field, shown when there is no error.

errorTypestring

Message shown when the value is invalid, and used as the browser's validation message. Defaults to the browser's own message.

successTypestring

Message shown when a valid value is confirmed on blur. Falls back to hint.

nameTypestring

Form field name; the text submits under it.

typeTypeReact.HTMLInputTypeAttributeDefault"text"

Input type, for example email, url or tel. Its constraints are checked during validation.

placeholderTypestring

Placeholder of the input.

requiredTypebooleanDefaultfalse

An empty field is invalid.

patternTypestring

Pattern the value must match; checked during validation.

minLengthTypenumber

Minimum length; checked during validation.

maxLengthTypenumber

Maximum length.

autoCompleteTypeReact.InputHTMLAttributes<HTMLInputElement>["autoComplete"]

Autofill hint of the input.

inputModeTypeReact.InputHTMLAttributes<HTMLInputElement>["inputMode"]

Virtual keyboard hint of the input.

spellCheckTypeboolean

Spell checking of the input.

disabledTypebooleanDefaultfalse

Dims the field and disables the input, so it cannot be edited, reached with Tab or submitted.

onValueChangeType(value: string) => void

Called on every edit with the new text.

onValueCommitType(value: string) => void

Called when the input commits a change: on blur after editing (the native change event).

Ref

ref receives a PxInputHandle handle with these methods.

focus(): void

Moves focus into the text field.

Accessibility

A native <input> labelled by a <label htmlFor> with the label content.
The message line is an aria-live="polite" region, so error and success messages are announced.
aria-invalid is set on the input while an error shows.
The message line (hint, error or success text) is linked to the input with aria-describedby while it has text, and long messages wrap.
The underline canvas is aria-hidden.
A native <input> submits the text under name. Its constraints (type, required, pattern, minLength) block submission; when error is set it becomes the custom validity message, so the browser's bubble shows it. The visible check runs on blur and, once an error shows, again on every keystroke; an empty optional field shows no state. Form reset restores defaultValue, clears the state and calls onValueChange.
Reduced motion: the underline lights at once instead of spreading from the caret, the error shake and pixel jitter are skipped, and the message swaps without rolling.

Theming

Styled with Tailwind classes on your shadcn theme tokens, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

This component reads --foreground, --muted-foreground, --card, --border, --lumesec, --lumesec-shine, --destructive and --lumesec-success.

Notes

After validation the root carries data-state="ok" or data-state="error".
className and other div props go to the wrapper; input attributes are the props listed above.

<px-password>

Passwordpx-password

<px-otp>

One-time codepx-otp

<px-search>

Search with resultspx-search

<px-select>

Selectpx-select

Related