LotruDocsComponents
BlocksComing soon

Docs

Field

Field

Fields represent an individual section of a form containing an associated control and label, as well as any description or validation messages.

We will use this name to personalize your experience.

"use client";
 
import * as React from "react";
import { css } from "@pigment-css/react";
 
import { Field, FieldControl, FieldDescription, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
 
export function FieldExample(): React.JSX.Element {
  return (
    <Field className={css({ maxWidth: "var(--size-sm)", width: "var(--size-full)" })}>
      <FieldLabel>Name</FieldLabel>
      <FieldControl render={<Input />} />
      <FieldDescription>We will use this name to personalize your experience.</FieldDescription>
    </Field>
  );
}

Installation

npx lotru@latest add ui/field

Usage

import { Field, FieldControl, FieldDescription, FieldLabel } from "@/components/ui/field";
<Field>
  <FieldLabel>Name</FieldLabel>
  <FieldControl />
  <FieldDescription>We will use this name to personalize your experience.</FieldDescription>
</Field>

Examples

With invalid state

Only alphanumeric characters are allowed (a-z, A-Z, 0-9).
"use client";
 
import * as React from "react";
import { css } from "@pigment-css/react";
 
import { Field, FieldControl, FieldError, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";
 
export function FieldExample(): React.JSX.Element {
  return (
    <Field className={css({ maxWidth: "var(--size-sm)", width: "var(--size-full)" })} invalid>
      <FieldLabel>Name</FieldLabel>
      <FieldControl render={<Input />} />
      <FieldError forceShow>Only alphanumeric characters are allowed (a-z, A-Z, 0-9).</FieldError>
    </Field>
  );
}

Previous

Dropdown Menu

Next

Hover Card