Field

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

Project code

Use the short code people already recognize.

import { Field, Input } from "density-base-ui";

export default function FieldExample() {
  return (
    <Field
      label="Project code"
      hint="Use the short code people already recognize."
    >
      <Input placeholder="BEACON" />
    </Field>
  );
}

Props

Prop	Attribute	Values	Default
`label`	None	React node	None
`hint`	None	React node	None
`orientation`	None	`vertical`, `horizontal`	`vertical`

Orientation

Project code

Use the short code people already recognize.

import { Field, Input } from "density-base-ui";

export default function FieldOrientationExample() {
  return (
    <Field
      label="Project code"
      hint="Use the short code people already recognize."
      orientation="horizontal"
    >
      <Input placeholder="BEACON" />
    </Field>
  );
}