Forms

TextField.

An input with room for the details.

Email address

A little context goes a long way.

Password

Accent

Glow intensity

Size

DisabledReduced motion

tsx

import { TextField } from "luminescent";
import "luminescent/style.css";


export function Example() {
  return (
    <TextField
      label="Email address"
      type="email"
      autoComplete="email"
      description="We will only send project updates."
      placeholder="you@company.com"
      required
    />
  );
}

Installation

bash

npm install luminescent

Import luminescent/style.css once at your application root. The example above uses the same package implementation as Storybook.

Variants and states

Use the preview controls to explore the supported variants, sizes, disabled/loading states and reduced motion. Controls appear only where the component exposes the corresponding prop. Theme and glow apply to every component.

Controlled and uncontrolled state

State contract: value / defaultValue / onChange (native event). Omit the controlled prop to let the component own its initial state; supply a value and callback when your application owns it. Native uncontrolled fields and state-backed form controls participate in form reset. Controlled state must be reset by the application.

tsx

import { useState } from "react";
import { TextField } from "luminescent";


export function ControlledExample() {
  const [value, setValue] = useState("");
  return (
    <TextField
      label="Name"
      value={value}
      onChange={(event) => setValue(event.currentTarget.value)}
    />
  );
}

API reference

Generated from the source TypeScript interfaces. Native attributes, className, style, aria-* and data-* also pass through to the documented element. Import TextFieldProps from the package for the full inherited contract.

Prop	Type	Details
`containerClassName`	`string`	Optional unless marked required.
`glowVariant`	`'peach' \| 'comet' \| 'light'`	Optional unless marked required.
`glowColor`	`GlowColor`	Optional unless marked required.
`label`	`React.ReactNode`	Optional unless marked required.
`description`	`React.ReactNode`	Optional unless marked required.
`error`	`React.ReactNode`	Optional unless marked required.
`prefix`	`React.ReactNode`	Optional unless marked required.
`suffix`	`React.ReactNode`	Optional unless marked required.
`fieldSize`	`'sm' \| 'md' \| 'lg'`	Optional unless marked required.
`passwordToggle`	`boolean`	Optional unless marked required.

Accessibility and keyboard

Label, description and error are programmatically linked. Validation includes text, not just color. Native composition/autocomplete events pass through. passwordToggle provides a labeled reveal button; fieldSize controls appearance while size retains native input sizing.

Keep labels meaningful and test application-level contrast, focus order and screen-reader output. See the accessibility guide for composition requirements.

Theme customization

tsx

import { LuminescentProvider, TextField } from "luminescent";
import "luminescent/style.css";


export function Example() {
  return (
    <LuminescentProvider theme="light" accent="violet" glow="subtle">
      <TextField
        label="Email address"
        type="email"
        autoComplete="email"
        description="We will only send project updates."
        placeholder="you@company.com"
        required
      />
    </LuminescentProvider>
  );
}

Switch between light and dark in the preview, or open the playground for a larger workspace. Custom CSS variables can override spacing, color, typography and effects.