TextField

A convenience wrapper composing a labeled, described, and validated field in one call.

View code

<form
	method="post"
	action="/workspaces"
	mix={[on<HTMLFormElement, "submit">("submit", (event) => event.preventDefault())]}
>
	<Card>
		<Card.Header>
			<Card.Title>Create a workspace</Card.Title>
			<Card.Description>You can rename it later; the address stays.</Card.Description>
		</Card.Header>
		<Card.Content mix={[vstack({ gap: 4, align: "stretch" })]}>
			<TextField
				label="Workspace name"
				name="name"
				required
				autoComplete="organization"
				defaultValue="Acme Design"
				description="Shown to everyone you invite."
			/>

			<TextField
				label="Billing email"
				type="email"
				name="billingEmail"
				required
				defaultValue="billing@acme"
				errorMessage="Enter an address we can invoice."
			/>
		</Card.Content>
		<Card.Footer mix={[hstack({ gap: 2, align: "center", justify: "end" })]}>
			<Button type="submit">Create workspace</Button>
		</Card.Footer>
	</Card>
</form>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

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

Composes Label, Input, Description, and FieldError into one field, computing every id and aria-describedby link from this instance's own stable identifier.

Examples

<TextField
	label={t("form.password.label")}
	type="password"
	name="password"
	description={t("form.password.hint")}
/>

<TextField
	label={t("form.username.label")}
	name="username"
	defaultValue="ab"
	errorMessage={t("form.username.tooShort")}
/>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Description
`color?`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role for the control's focus ring. Defaults to `"neutral"` when omitted.
`label`	`RemixNode`	The field's caption, rendered through Label and associated with the control through a native `for`/`id` relationship computed from this instance's own identifier.
`description?`	`RemixNode`	Supporting copy rendered through Description beneath the control and referenced by the control's `aria-describedby`. Omit to render no description.
`errorMessage?`	`RemixNode`	Validation message rendered through FieldError beneath the control, marking `aria-invalid` unless set explicitly. Falls back to a Form's own `issues` message by `name`; an explicit value wins.
`autoFocus?`	`boolean`	Native `autofocus`. Defaults to `true` for the first invalid field of an enclosing Form's `issues`, landing keyboard focus on the problem with no client JavaScript; pass explicitly to override.
`type?`	`"text" \| "email" \| "password" \| "tel" \| "url" \| "search" \| "number"`	Native `<input>` `type`. Defaults to DEFAULT_TYPE.
`name?`	`string`	Native `name` submitted with an enclosing form.
`value?`	`string`	Current value, for a control a consumer tracks itself.
`defaultValue?`	`string`	Initial value, for a control left to the platform's own uncontrolled state.
`placeholder?`	`string`	Placeholder copy shown while the control is empty.
`required?`	`boolean`	Marks the control required for its enclosing form.
`disabled?`	`boolean`	Marks the control inert and excluded from the tab order.
`readOnly?`	`boolean`	Marks the control's value fixed, while keeping it focusable and included in form submission.
`autoComplete?`	`string`	Native autofill hint, e.g. `"email"` or `"current-password"`.
`pattern?`	`string`	Native validation pattern the control's value must match.
`minLength?`	`number`	Minimum accepted value length.
`maxLength?`	`number`	Maximum accepted value length.
`parts?`	`PartsProps`	Per-part styling for this wrapper's internally composed elements.

Also accepts everything in Omit<TagProps<"div">, "children">.

Types

Name	Values	What it decides
`Color`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role for the control's keyboard focus ring, each mapped to its matching `--ui-*` variables.
`Type`	`"text" \| "email" \| "password" \| "tel" \| "url" \| "search" \| "number"`	Native `<input>` `type` this wrapper renders a single-line, text-like control for.