Hewn
Components

Components

TextField

Labeled text input with description and validation messaging.

newfree

Install

@hewnui/ui · hewnui

Terminal
# Available at launch: npm install @hewnui/ui
Terminal
# Available at launch: pnpm add @hewnui/ui
Terminal
# Available at launch: yarn add @hewnui/ui
Terminal
# Available at launch: bun add @hewnui/ui
Terminal
# Available at launch: npx hewnui@latest add text-field

Built on React Aria TextField. Labels sit above the control with optional helper and error text below.

We'll send billing receipts here.
That code is expired.

Usage

TSX
import { TextField } from "@hewnui/ui";

<TextField label="Email" type="email" placeholder="you@studio.dev" />

Variants

outline (default), filled, flushed, and glass.

Under the global glass material, boxed variants pick up tinted frost and refraction. flushed stays underline-only so the bottom edge remains legible.

Sizes

sm, md (default), and lg.

States

  • Description helper text
  • Invalid + errorMessage
  • Disabled

Accessibility

  • Label association through React Aria
  • Error text connected via field semantics
  • Keyboard focus ring on the input

API reference

Props for TextField from @hewnui/ui/text-field. Generated from component types — not hand-written.

Prop

Type

Button

Pressable action control with variants, sizes, and loading state.

TextArea

Multiline labeled field with description and validation messaging.

On this page

UsageVariantsSizesStatesAccessibility