Actions and forms

TextField

Single-line text and search input.

Live example

EmailWe only use this for replies.Email with errorEnter a valid address.Disabled

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { TextField } from "@cofob/design-system-react";

/**
 * Complete TextField parameter reference.
 * @param value/defaultValue
 *   type: string or string[]; controlled or initial value
 *   default: —
 *   example: "overview"
 * @param label
 *   type: string | renderable content
 *   default: —
 *   example: "Accessible label"
 * @param hint/description
 *   type: string | renderable content
 *   default: —
 *   example: "We will only use this for updates."
 * @param error
 *   type: string | renderable content
 *   default: —
 *   example: "Enter a valid value."
 * @param size
 *   type: "sm" | "md" | "lg" (plus heading sizes)
 *   default: "md"
 *   example: "md"
 * @param input attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function TextFieldExample() {
  return (
    <TextField label="Email" />
  );
}

Svelte

<script lang="ts">
  import { TextField } from "@cofob/design-system-svelte";

  // Complete TextField parameter reference.
  // value/defaultValue
  //   type: string or string[]; controlled or initial value
  //   default: —
  //   example: "overview"
  // label
  //   type: string | renderable content
  //   default: —
  //   example: "Accessible label"
  // hint/description
  //   type: string | renderable content
  //   default: —
  //   example: "We will only use this for updates."
  // error
  //   type: string | renderable content
  //   default: —
  //   example: "Enter a valid value."
  // size
  //   type: "sm" | "md" | "lg" (plus heading sizes)
  //   default: "md"
  //   example: "md"
  // leading/trailing
  //   type: Snippet (Svelte)
  //   default: —
  //   example: leading search snippet / trailing clear snippet
  // input attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<TextField label="Email" bind:value />

HTML

<!--
  Complete TextField parameter reference.
  value/defaultValue
    type: string or string[]; controlled or initial value
    default: —
    example: "overview"
  label
    type: string | renderable content
    default: —
    example: "Accessible label"
  hint/description
    type: string | renderable content
    default: —
    example: "We will only use this for updates."
  error
    type: string | renderable content
    default: —
    example: "Enter a valid value."
  size
    type: "sm" | "md" | "lg" (plus heading sizes)
    default: "md"
    example: "md"
  input attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<input class="cf-input" type="email" />

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-input`
Adapters	Native · React · Svelte
Primary props	value/defaultValue · label · hint/description · error · size · leading/trailing · input attributes
Documented states	default · focus · disabled · error
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`value/defaultValue`	`string or string[]; controlled or initial value`	`—`	React · Svelte · HTML	`"overview"`	Use the first form for controlled state and the second for initial state.
`label`	`string \| renderable content`	`—`	React · Svelte · HTML	`"Accessible label"`	Visible or accessible name, depending on the component.
`hint/description`	`string \| renderable content`	`—`	React · Svelte · HTML	`"We will only use this for updates."`	Supporting text announced with the control.
`error`	`string \| renderable content`	`—`	React · Svelte · HTML	`"Enter a valid value."`	Validation message and invalid visual/ARIA state.
`size`	`"sm" \| "md" \| "lg" (plus heading sizes)`	`"md"`	React · Svelte · HTML	`"md"`	Applies a design-system size token.
`leading/trailing`	`Snippet (Svelte)`	`—`	Svelte	`leading search snippet / trailing clear snippet`	Decorative or interactive Svelte snippets inside the input shell.
`input attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.