Actions and forms

Field

Label, hint, required, and error message composition.

Live example

Project name

Use a short, recognizable name.

Slug

A slug is required.

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 { Field } from "@cofob/design-system-react";

/**
 * Complete Field parameter reference.
 * @param label
 *   type: string | renderable content
 *   required
 *   example: "Accessible label"
 * @param htmlFor/forId
 *   type: string
 *   default: —
 *   example: "email"
 * @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 required
 *   type: boolean
 *   default: false
 *   example: true
 * @param hintId/errorId
 *   type: string (React)
 *   default: —
 *   example: hintId="email-hint" errorId="email-error"
 * @param children
 *   type: ReactNode | Svelte Snippet | child HTML
 *   default: —
 *   example: children / snippet / child HTML
 * @param div attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function FieldExample() {
  return (
    <Field label="Email"><input /></Field>
  );
}

Svelte

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

  // Complete Field parameter reference.
  // label
  //   type: string | renderable content
  //   required
  //   example: "Accessible label"
  // htmlFor/forId
  //   type: string
  //   default: —
  //   example: "email"
  // 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."
  // required
  //   type: boolean
  //   default: false
  //   example: true
  // children
  //   type: ReactNode | Svelte Snippet | child HTML
  //   default: —
  //   example: children / snippet / child HTML
  // div attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<Field label="Email" forId="email"><input id="email" /></Field>

HTML

<!--
  Complete Field parameter reference.
  label
    type: string | renderable content
    required
    example: "Accessible label"
  htmlFor/forId
    type: string
    default: —
    example: "email"
  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."
  required
    type: boolean
    default: false
    example: true
  children
    type: ReactNode | Svelte Snippet | child HTML
    default: —
    example: children / snippet / child HTML
  div attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<label class="cf-field">Email <input class="cf-input" /></label>

Contract

CSS selector	`.cf-field`
Adapters	Native · React · Svelte
Primary props	label · htmlFor/forId · hint/description · error · required · hintId/errorId · children · div attributes
Documented states	default · hover/focus where interactive · disabled where applicable
Interaction	Static and SSR-safe
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
`label`required	`string \| renderable content`	`required`	React · Svelte · HTML	`"Accessible label"`	Visible or accessible name, depending on the component.
`htmlFor/forId`	`string`	`—`	React · Svelte · HTML	`"email"`	Associates the field label with its form control.
`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.
`required`	`boolean`	`false`	React · Svelte · HTML	`true`	Marks the label and control as required.
`hintId/errorId`	`string (React)`	`—`	React	`hintId="email-hint" errorId="email-error"`	Overrides generated descriptive IDs in React.
`children`	`ReactNode \| Svelte Snippet \| child HTML`	`—`	React · Svelte · HTML	`children / snippet / child HTML`	Idiomatic adapter composition content.
`div attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.