Forms

Field

Server Component

Label + description + error layout.

Import

tsx

import { Field } from "@cronus-ui/ui";

bash

npx cronus-ui add field

Examples

Composition

Compose FieldLabel, FieldDescription, and an Input inside a Field.

Workspace name

Used in your workspace URL. Letters, numbers, and dashes.

tsx

<Field>
  <FieldLabel htmlFor="workspace">Workspace name</FieldLabel>
  <Input
    id="workspace"
    placeholder="acme-inc"
    aria-describedby="workspace-desc"
  />
  <FieldDescription id="workspace-desc">
    Used in your workspace URL. Letters, numbers, and dashes.
  </FieldDescription>
</Field>

With error

A Field that surfaces an inline FieldError as the value changes.

Username

tsx

function FieldErrorDemo() {
  const [username, setUsername] = useState("");
  const error = username.includes(" ") ? "Username can't contain spaces." : "";

  return (
    <Field>
      <FieldLabel htmlFor="username">Username</FieldLabel>
      <Input
        id="username"
        value={username}
        invalid={!!error}
        placeholder="ada"
        aria-describedby={error ? "username-err" : undefined}
        onChange={(event) => setUsername(event.target.value)}
      />
      <FieldError id="username-err">{error}</FieldError>
    </Field>
  );
}

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component FieldDefault layout:inline style:field {
  description:"We'll never share it."
  label "Email"
}

page "/audit/field/default" type:custom {
  use FieldDefault
}

API Reference

Generated from the component's exported types.

FieldProps

Extends HTMLAttributes<HTMLDivElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

FieldLabelProps

Extends LabelHTMLAttributes<HTMLLabelElement>

Prop	Type	Default	Description
`htmlFor`	`string`	—	id of the labelled control.
`children`	`ReactNode`	—	Contents of the component.
`className`	`string`	—	Additional class names merged onto the root.

FieldDescriptionProps

Extends HTMLAttributes<HTMLParagraphElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.

FieldErrorProps

Extends HTMLAttributes<HTMLParagraphElement>

Prop	Type	Default	Description
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`id`	`string`	—	DOM id of the root element.