Input

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

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

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

<Input
	aria-label={t("form.search.label")}
	color="brand"
	placeholder={t("form.search.placeholder")}
/>

<Input id="username" aria-describedby="username-error" aria-invalid="true" />
<FieldError id="username-error">{t("form.username.taken")}</FieldError>

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.