@app-studio/components

TextField

A customizable text input field with optional helpers, labels, and icons.

Import

import { TextField } from '@app-studio/components';

New to the library? Complete installation and provider setup first.

Interactive examples

Try the component, then open Code to copy the complete example.

Loading preview…

import React, { useState } from 'react';
import { TextField } from '@app-studio/components';
import { Text, Vertical } from 'app-studio';

export function TextFieldExample() {
  const [name, setName] = useState('App Studio');
  return (
    <Vertical gap={12} width="100%" maxWidth={360}>
      <TextField
        label="Project name"
        placeholder="Name your project"
        value={name}
        onChange={setName}
        isClearable
      />
      <Text role="status">
        {name ? `Project: ${name}` : 'Enter a project name.'}
      </Text>
    </Vertical>
  );
}

Props

Required props are marked below. A dash indicates an unspecified default. Design system configuration can override implementation defaults.

Scroll horizontally to see every column.

TextField
Prop	Type	Default	Description
`id`	`string`	`—`	See the type and source declaration for this property.Source
`error`	`any`	`false`	Error state — usually a string for the error message, or a boolean toggle.Source
`helperText`	`string`	`—`	Helper text rendered below the input (hint / error / explanation).Source
`name`	`string`	`—`	Field name used by forms and Formik bindings.Source
`label`	`string`	`—`	Visible label rendered alongside the input. Form-library wrappers (Switch, TextField, Checkbox, …) consume this. Not a native HTML attribute on <input>, but conventionally part of the form-control prop surface.Source
`left`	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	See the type and source declaration for this property.Source
`right`	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	See the type and source declaration for this property.Source
`placeholder`	`string`	`—`	Hint displayed while the field is empty.Source
`isReadOnly`	`boolean`	`false`	Keeps the value visible without allowing edits.Source
`isDisabled`	`boolean`	`false`	Disables user interaction.Source
`isClearable`	`boolean`	`true`	See the type and source declaration for this property.Source
`isAutoFocus`	`boolean`	`false`	See the type and source declaration for this property.Source
`isRequired`	`boolean`	`—`	Marks this field as required.Source
`required`	`boolean`	`—`	See the type and source declaration for this property.Source
`rightIcon`	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	See the type and source declaration for this property.Source
`leftIcon`	View type `string \| number \| bigint \| boolean \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal \| Promise<string \| number \| bigint \| boolean \| React.ReactPortal \| React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| null \| undefined> \| null`	`—`	See the type and source declaration for this property.Source
`labelProps`	`any`	`—`	See the type and source declaration for this property.Source
`onChange`	`((value: string) => void)`	`—`	Called when the value changes, with the value itself — not the DOM event. TextField follows the value-first convention this package already exposes through `onChangeText`, so there is no `event.target` to read: onChange={(value) => setQuery(value)} // ✅ onChange={(e) => setQuery(e.target.value)} // ❌ compile error The parameter is deliberately typed `string` rather than `any`: a DOM-shaped handler is an API mistake, and typing it makes that mistake a compile error instead of an input that silently never updates. If you need the event, use `onChangeText` for the value and reach for the native `<input>` through `inputRef`.Source
`onChangeText`	`((value: string) => void)`	`—`	See the type and source declaration for this property.Source
`onBlur`	`((event: any) => void)`	`—`	Called when the field loses focus, with the blur event (not the value). Clearing the field via the clear button synthesises a minimal `{ target: { name } }` so form libraries can mark the field touched.Source
`onClick`	`(() => void)`	`—`	Called when the user activates the component.Source
`onFocus`	`(() => void)`	`—`	See the type and source declaration for this property.Source
`size`	`Size` `"sm""md""lg""xs""xl"`	`'md'`	Size preset for the component.Source
`shadow`	`ViewProps \| Shadow \| Elevation`	`{}`	Shadow or elevation styling.Source
`shape`	`Shape` `"square""rounded""pill""default"`	`'default'`	Shape preset for the component.Source
`views`	`TextFieldStyles`	`{ container: {}, field: {}, label: {}, helperText: {}, text: {} }`	Style overrides for the named internal parts.Source
`value`	`string`	`—`	Current controlled value. Update it from the matching change callback.Source
`variant`	`Variant` `"outline""default""none"`	`'default'`	Visual treatment of the component.Source
`isMultiline`	`boolean`	`—`	See the type and source declaration for this property.Source
`rows`	`number`	`—`	See the type and source declaration for this property.Source
`inputRef`	`((node: { focus: () => void; } \| null) => void)`	`—`	See the type and source declaration for this property.Source

Common inherited styling props (6)

Scroll horizontally to see every column.

TextField inherited
Prop	Type	Default	Description
`media`	`Record<string, CssProps>`	`—`	See the type and source declaration for this property.
`as`	`keyof JSX.IntrinsicElements` `"symbol""object""slot""style""title""pattern""form""animate""clipPath""filter""marker""mask""a""abbr""address""area""article""aside""audio""b""base""bdi""bdo""big""blockquote""body""br""button""canvas""caption""center""cite""code""col""colgroup""data""datalist""dd""del""details""dfn""dialog""div""dl""dt""em""embed""fieldset""figcaption""figure""footer""h1""h2""h3""h4""h5""h6""head""header""hgroup""hr""html""i""iframe""img""input""ins""kbd""keygen""label""legend""li""link""main""map""mark""menu""menuitem""meta""meter""nav""noindex""noscript""ol""optgroup""option""output""p""param""picture""pre""progress""q""rp""rt""ruby""s""samp""search""script""section""select""small""source""span""strong""sub""summary""sup""table""template""tbody""td""textarea""tfoot""th""thead""time""tr""track""u""ul""var""video""wbr""webview""svg""animateMotion""animateTransform""circle""defs""desc""ellipse""feBlend""feColorMatrix""feComponentTransfer""feComposite""feConvolveMatrix""feDiffuseLighting""feDisplacementMap""feDistantLight""feDropShadow""feFlood""feFuncA""feFuncB""feFuncG""feFuncR""feGaussianBlur""feImage""feMerge""feMergeNode""feMorphology""feOffset""fePointLight""feSpecularLighting""feSpotLight""feTile""feTurbulence""foreignObject""g""image""line""linearGradient""metadata""mpath""path""polygon""polyline""radialGradient""rect""set""stop""switch""text""textPath""tspan""use""view"`	`—`	See the type and source declaration for this property.
`themeMode`	`"light" \| "dark"` `"light""dark"`	`—`	See the type and source declaration for this property.
`_hover`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_active`	`string \| CssProps`	`—`	See the type and source declaration for this property.
`_focus`	`string \| CssProps`	`—`	See the type and source declaration for this property.

For shared layout, color, and responsive properties, read Styling & composition and Responsive layouts. Additional native element attributes depend on the target platform.

Usage guidance

Give controls a visible label or an accessible name, and verify keyboard interaction. See Accessibility.
For controlled inputs, update the value from the callback shown in the props table. Keep application state in your component or form library.
These previews run in the browser. Check React Native setup for platform requirements and differences.