Field and inline validation

import { Effect, Option, Schema } from "effect";
import { useState } from "react";
import { Field, FieldInput } from "@gpuixui/components/field";
import { validate } from "@gpuixui/components/validation/logic";

const WorkspaceSlug = Schema.NonEmptyString.check(
  Schema.isPattern(/^[a-z0-9]+(-[a-z0-9]+)*$/, {
    identifier: "WorkspaceSlugPattern",
    title: "Workspace URL",
    message: "Use lowercase letters, numbers and single hyphens",
  }),
);

export const WorkspaceForm = () => {
  const [slug, setSlug] = useState("");
  const [error, setError] = useState<string>();

  const submit = () => {
    const message = Effect.runSync(validate(WorkspaceSlug)(slug));
    setError(Option.getOrUndefined(message));
  };

  return (
    <Field
      label="Workspace URL"
      description="Lowercase words joined by hyphens."
      error={error}
      required
    >
      <FieldInput
        value={slug}
        onChange={(event) => setSlug(event.value ?? "")}
      />
    </Field>
  );
};

Field
├── FieldLabel
├── FieldDescription
├── FieldError
└── FieldInput

Fieldset
└── Field