Density

ChatInput

ChatInput wraps a textarea in Density input styling and includes a same-size send button that inherits the composer emphasis unless submitEmphasis overrides it.

import { Button, ChatInput, Select } from "density-base-ui";
import { GitBranch, Mic, Plus } from "lucide-react";

const branchItems = [
  {
    value: "main",
    label: (
      <span
        style={{ alignItems: "center", display: "inline-flex", gap: "0.25rem" }}
      >
        <GitBranch aria-hidden="true" size={14} strokeWidth={1.75} />
        main
      </span>
    ),
  },
  {
    value: "alpha",
    label: (
      <span
        style={{ alignItems: "center", display: "inline-flex", gap: "0.25rem" }}
      >
        <GitBranch aria-hidden="true" size={14} strokeWidth={1.75} />
        alpha-launch
      </span>
    ),
  },
  {
    value: "docs",
    label: (
      <span
        style={{ alignItems: "center", display: "inline-flex", gap: "0.25rem" }}
      >
        <GitBranch aria-hidden="true" size={14} strokeWidth={1.75} />
        docs-refresh
      </span>
    ),
  },
];

export default function ChatInputExample() {
  return (
    <form
      aria-label="Chat composer"
      onSubmit={(event) => {
        event.preventDefault();
      }}
    >
      <ChatInput
        aria-label="Message"
        defaultValue="Turn this into a launch checklist"
        padding={true}
        childrenStart={
          <div
            style={{
              alignItems: "center",
              display: "flex",
              flexWrap: "nowrap",
              gap: "0.375rem",
            }}
          >
            <Select
              aria-label="Branch"
              defaultValue="main"
              emphasis="secondary"
              items={branchItems}
              size="sm"
            />
            <Select
              aria-label="Model"
              defaultValue="sonnet"
              items={[
                { value: "sonnet", label: "Sonnet" },
                { value: "opus", label: "Opus" },
                { value: "haiku", label: "Haiku" },
              ]}
              size="sm"
            />
            <Button
              aria-label="Add attachment"
              emphasis="ghost-primary"
              size="sm"
              square
              type="button"
            >
              <Plus aria-hidden="true" size={16} strokeWidth={1.75} />
            </Button>
          </div>
        }
        childrenEnd={
          <Button
            aria-label="Start voice input"
            emphasis="ghost-primary"
            size="sm"
            square
            type="button"
          >
            <Mic aria-hidden="true" size={16} strokeWidth={1.75} />
          </Button>
        }
      />
    </form>
  );
}

Options content

Use optionsContent for model selectors, attachment controls, or mode buttons that sit to the left of the send button.

Emphasis

import { ChatInput, View } from "density-base-ui";

export default function ChatInputEmphasisExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <ChatInput
        aria-label="Primary composer"
        emphasis="primary"
        placeholder="Primary"
      />
      <ChatInput
        aria-label="Secondary composer"
        emphasis="secondary"
        placeholder="Secondary"
      />
      <ChatInput
        aria-label="Outline composer"
        emphasis="outline"
        placeholder="Outline"
      />
      <ChatInput
        aria-label="Ghost composer"
        emphasis="ghost-primary"
        placeholder="Ghost"
      />
      <ChatInput
        aria-label="Ghost secondary composer"
        emphasis="ghost-secondary"
        placeholder="Ghost secondary"
      />
      <ChatInput
        aria-label="Ghost tertiary composer"
        emphasis="ghost-tertiary"
        placeholder="Ghost tertiary"
      />
    </View>
  );
}

Padding

ChatInput applies size-derived padding to its input surface. Use padding={false} for a flush composer; its normal inset follows the inherited size and theme padding factor.

import { ChatInput, View } from "density-base-ui";

export default function ChatInputPaddingExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <ChatInput
        aria-label="No padding composer"
        padding={false}
        placeholder="No padding"
      />
      <ChatInput
        aria-label="Default padding composer"
        padding
        placeholder="Default padding"
      />
    </View>
  );
}

Size

import { ChatInput, View } from "density-base-ui";

export default function ChatInputSizeExample() {
  return (
    <View align="start" gap="md" padding={false}>
      <ChatInput aria-label="2xs composer" size="2xs" placeholder="2xs" />
      <ChatInput aria-label="xs composer" size="xs" placeholder="xs" />
      <ChatInput aria-label="Small composer" size="sm" placeholder="Small" />
      <ChatInput aria-label="Medium composer" size="md" placeholder="Medium" />
      <ChatInput aria-label="Large composer" size="lg" placeholder="Large" />
      <ChatInput aria-label="xl composer" size="xl" placeholder="xl" />
      <ChatInput aria-label="2xl composer" size="2xl" placeholder="2xl" />
      <ChatInput aria-label="3xl composer" size="3xl" placeholder="3xl" />
    </View>
  );
}