Density

Field

Field wraps one control with a Density label, optional hint, and shared field layout.

Use the short code people already recognize.
import { Field, Skeleton } from "density-base-ui";

export default function FieldExample() {
  return (
    <Field
      label="Project code"
      hint="Use the short code people already recognize."
    >
      <Skeleton style={{ width: "100%" }} />
    </Field>
  );
}

Orientation

Use the short code people already recognize.
import { Field, Skeleton } from "density-base-ui";

export default function FieldOrientationExample() {
  return (
    <Field
      label="Project code"
      hint="Use the short code people already recognize."
      orientation="horizontal"
    >
      <Skeleton style={{ width: "100%" }} />
    </Field>
  );
}

Error

Enter a valid project code.
import { Field, Skeleton } from "density-base-ui";

export default function FieldErrorExample() {
  return (
    <Field
      errorMessage="Enter a valid project code."
      hint="Use the short code people already recognize."
      label="Project code"
    >
      <Skeleton style={{ width: "100%" }} />
    </Field>
  );
}