[ @sdxc/ui ]

Input

A single-line native form field for free text entry, rendered as a bordered, rounded <input> whose border, background.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

Repository name

github.com/acme/edge-router

OwnerYou do not have permission to create here.

Repository ID

Template

View code

let name = "edge-router";

<Label htmlFor="repoName">Repository name</Label>
<Input
	id="repoName"
	name="repoName"
	value={name}
	required
	autoComplete="off"
	aria-describedby="repoName-hint"
	mix={[
		on<HTMLInputElement, "input">("input", (event) => {
			name = event.currentTarget.value;
			void handle.update();
		}),
	]}
/>
<Description id="repoName-hint">
	github.com/acme/{name === "" ? "…" : name}
</Description>

<Label htmlFor="repoOwner">Owner</Label>
<Input
	id="repoOwner"
	name="repoOwner"
	defaultValue="acme"
	aria-invalid="true"
	aria-describedby="repoOwner-error"
/>
<FieldError id="repoOwner-error">You do not have permission to create here.</FieldError>

<Label htmlFor="repoId">Repository ID</Label>
<Input id="repoId" name="repoId" readOnly value="R_kgDOKp2f1w" />

<Label htmlFor="repoTemplate">Template</Label>
<Input id="repoTemplate" name="repoTemplate" disabled value="None available on this plan" />

Installation

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

npm add @sdxc/ui remix

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

Usage

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

Renders a native <input> host colored via data-color, with hover, focus, and disabled states driven by native pseudo-classes; [aria-invalid="true"] together with :user-invalid forces the danger tone regardless of color.

Examples

Brand search box

View code

<Input
	type="search"
	name="q"
	aria-label="Search projects"
	color="brand"
	placeholder="Search Acme projects…"
/>

Invalid value

UsernameThat username is already taken.

View code

<div mix={[vstack({ gap: 2, align: "stretch" })]}>
	<Label htmlFor="username">Username</Label>
	<Input
		id="username"
		name="username"
		defaultValue="acme"
		aria-describedby="username-error"
		aria-invalid="true"
	/>
	<FieldError id="username-error">That username is already taken.</FieldError>
</div>

Props

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

Types

Name	Values	What it decides
`Color`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	Semantic color role for the focus-visible ring, each mapped to its matching `--ui-*` variables.