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, Panel } from "density-base-ui";

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

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, Panel } from "density-base-ui";

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