Kumo

@cloudflare/kumo

Field

A wrapper component that provides labels, descriptions, and error messages for form inputs.

The email to send notifications to.

<Field
  label="Email"
  description="The email to send notifications to."
>
  <Input placeholder="name@example.com" type="email" />
</Field>

Installation

import { Field } from "~/components/field/field";

Usage

import { Field } from "~/components/field/field";
import { Input } from "~/components/input/input";

export default function Example() {
  return (
    <Field label="Username">
      <Input placeholder="Enter username" />
    </Field>
  );
}

Examples

With Label

<Field label="Username">
  <Input placeholder="Enter username" />
</Field>

With Description

Your secret API key for authentication.

<Field
  label="API Key"
  description="Your secret API key for authentication."
>
  <Input type="password" placeholder="sk_..." />
</Field>

With Error

<Field
  label="Email"
  error={{
    message: "Please enter a valid email.",
    match: "typeMismatch",
  }}
>
  <Input 
    placeholder="name@example.com" 
    type="email" 
    variant="error"
  />
</Field>

API Reference

PropTypeDefault
labelstringundefined
descriptionstringundefined
error{ message: string; match: string }undefined