Skip to component details
EXEPERTAI LAB
ProductCapabilitiesTrustFAQUI GalleryBlogNews
Sign inOpen app ↗
ProductCapabilitiesTrustFAQUI GalleryBlogNewsSign in
← Browse gallery
Forms·@exepert/ui / TextField

Text Field

A labelled single-line field for names, queries, and short values.

Open in Playground ↗All components

Variants and states

4 copy-ready examples

Default field

A calm field with a visible label and hint.

Open in Playground ↗
Starting preview…
import { TextField } from "@exepert/ui";
import "@exepert/ui/styles.css";
export default function Example() {
  return (
    <TextField label="Project name" placeholder="Research workspace" helperText="Use a short memorable name." />
  );
}

Usage

Pair a visible label with useful help or error text.

Props

  • label: string
  • helperText: string
  • error: string
  • size: sm | md | lg
  • disabled: boolean

Accessibility

  • The label is associated with the input and remains visible while editing.
  • Error text explains how to fix the value.

Install

Install the pinned public release, then import the component and stylesheet.

npm install @exepert/ui@0.1.0

import { TextField } from "@exepert/ui";

import "@exepert/ui/styles.css";

EXEPERTAI LAB

Compare supported models, inspect system behaviour, and understand the context around each result.

PrivacyTermsContact

EXEPERT AI is an independent software and AI research lab in Malaysia

Malaysia · hello@exepert.com

Open in Gmail ↗

© 2026 EXEPERT AI. All rights reserved.