Text field · Pixel HD component

<hf-input>· loading

Trytype half an email address, then click away.

Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

Loading <hf-input>

Props

labelremounts

valueremounts

hintremounts

errorremounts

successremounts

nameremounts

typeremounts

placeholderremounts

requiredremounts

patternremounts

minlengthremounts

maxlengthremounts

autocompleteremounts

inputmoderemounts

spellcheckremounts

<HfInput
  label="Work email"
  hint="We’ll send the invite here"
  name="email"
  type="email"
  placeholder="you@company.com"
  required
/>

Installation

pnpm dlx shadcn@latest add @lumesec/hf-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/hf-input.json

Usage

import { HfInput } from "@/components/lumesec/hf-input";

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

Behaviour

A comet of light runs around the border while you type and sparks off the caret. Invalid input turns the border into static; a valid value gets a green sweep.

API reference

Attributes

labelReact proplabelTypestring

Visible label, linked to the inner input. Hidden when absent.

valueReact propvalueTypestring

Initial value. Also the value restored on form reset.

hintReact prophintTypestring

Text under the field when there is no error.

errorReact properrorTypestring

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

successReact propsuccessTypestring

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

nameReact propnameTypestring

Form field name.

typeReact proptypeTypestring

Passed to the inner <input>, for example email, url or password.

placeholderReact propplaceholderTypestring

Passed to the inner input.

requiredReact proprequiredTypebooleanDefaultfalse

Presence attribute, passed to the inner input.

patternReact proppatternTypestring

Passed to the inner input.

minlengthReact propminlengthTypenumber

Passed to the inner input.

maxlengthReact propmaxlengthTypenumber

Passed to the inner input.

autocompleteReact propautocompleteTypestring

Passed to the inner input.

inputmodeReact propinputmodeTypestring

Passed to the inner input.

spellcheckReact propspellcheckTypestring

Passed to the inner input.

Events

Events bubble and cross the shadow boundary unless the description says otherwise.

inputReact proponInputDetail{ value: string }

Fires on every edit.

changeReact proponChangeDetail{ value: string }

Fires when the inner input commits a change, on blur after editing.

Methods

Call them on the element, for example through a React ref.

focus()

Moves focus to the inner input.

Properties

valueTypestring

Current text. Setting it updates the form value and validity, but not the visual state or message.

Accessibility

A <label for> in the shadow root names the inner <input>.
The hint, error and success text sits in an aria-live="polite" region.
Sets aria-invalid on the inner input when it validates on blur.
The host does not delegate focus; call focus() on it to focus the input.
Submits the inner input value under name. Validity mirrors the inner input constraints (required, type, pattern, minlength, maxlength) and reports customError with the error text or the browser message. The error or success state appears on blur, and while in error it re-checks on every edit. Form reset restores the value attribute.
Reduced motion: the border comet stays in one place, the error static does not flicker, the caret sparks and error shake are skipped, and messages swap without rolling.

Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from --lumesec. See Theming.

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

To restyle only LumeSec elements, set the matching --ui-* overrides: --ui-accent, --ui-danger, --ui-fg, --ui-muted, --ui-ok and --ui-surface.

Notes

Attributes are read once on first connect and are not observed; use the value property afterwards.
The inner input's native input event is composed, so an input listener on the host also receives that event (without detail) in addition to the custom one.

<hf-button>

Buttonhf-button

<hf-switch>

Switchhf-switch

<hf-segmented>

Segmented controlhf-segmented

<hf-composer>

Prompt composerhf-composer

Related