Density

Input

The input wraps Base UI’s input component with Density’s shared control attributes.

Use the name people see in reports.
import { Input } from "density-base-ui";

export default function InputExample() {
  return (
    <Input
      label="Project name"
      hint="Use the name people see in reports."
      placeholder="Roadmap planning"
    />
  );
}

Props

Prop Attribute Values Default
presentation data-dn-presentation input input
emphasis data-dn-emphasis primary, secondary, outline, ghost primary
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
label None ReactNode None
hint None ReactNode None
fieldOrientation None vertical, horizontal vertical

Field

Shown below the control.
Shown beside the control.
import { Input } from "density-base-ui";
export default function InputFieldExample() {
  return (
    <div style={styles.stack}>
      <Input
        fieldOrientation="vertical"
        hint="Shown below the control."
        label="Vertical field"
      />
      <Input
        fieldOrientation="horizontal"
        hint="Shown beside the control."
        label="Horizontal field"
      />
    </div>
  );
}
const styles = {
  stack: { display: "grid", gap: "1rem", width: "100%" },
} as const;

Emphasis

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

export default function InputEmphasisExample() {
  return (
    <div style={{ display: "grid", gap: "0.5rem", width: "100%" }}>
      <Input emphasis="primary" placeholder="Primary input" />
      <Input emphasis="secondary" placeholder="Secondary input" />
      <Input emphasis="outline" placeholder="Outline input" />
      <Input emphasis="ghost" placeholder="Ghost input" />
    </div>
  );
}

Size

Input sizes use the shared Density control scale: 2xs, xs, sm, md, lg, xl, 2xl, and 3xl. An input and button with the same size have the same height.

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

export default function InputSizeExample() {
  return (
    <div style={{ display: "grid", gap: "0.5rem", width: "100%" }}>
      <Input size="2xs" placeholder="2xs input" />
      <Input size="xs" placeholder="xs input" />
      <Input size="sm" placeholder="sm input" />
      <Input size="md" placeholder="md input" />
      <Input size="lg" placeholder="lg input" />
      <Input size="xl" placeholder="xl input" />
      <Input size="2xl" placeholder="2xl input" />
      <Input size="3xl" placeholder="3xl input" />
    </div>
  );
}