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>
  );
}