Density

Chat input

The chat input component wraps a textarea in Density input styling and includes a send button.

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

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"
        optionsContent={<Button type="button">Draft</Button>}
      />
    </form>
  );
}

Props

Prop Attribute Values Default
optionsContent None React node None
emphasis data-dn-emphasis primary, secondary, outline, ghost primary
padding data-dn-padding none, 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
size data-dn-size Density size md
textarea props Native textarea attributes Native Native

Options content

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

Emphasis

import { ChatInput } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

export default function ChatInputEmphasisExample() {
  return (
    <ExampleStack>
      <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"
        placeholder="Ghost"
      />
    </ExampleStack>
  );
}

Padding

ChatInput applies uniform md padding to its input surface. Use padding="none" for a flush composer or another Density padding value to change the inset.

import { ChatInput } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

export default function ChatInputPaddingExample() {
  return (
    <ExampleStack>
      <ChatInput
        aria-label="No padding composer"
        padding="none"
        placeholder="No padding"
      />
      <ChatInput
        aria-label="2xs padding composer"
        padding="2xs"
        placeholder="2xs"
      />
      <ChatInput
        aria-label="xs padding composer"
        padding="xs"
        placeholder="xs"
      />
      <ChatInput
        aria-label="Small padding composer"
        padding="sm"
        placeholder="Small"
      />
      <ChatInput
        aria-label="Medium padding composer"
        padding="md"
        placeholder="Medium"
      />
      <ChatInput
        aria-label="Large padding composer"
        padding="lg"
        placeholder="Large"
      />
      <ChatInput
        aria-label="xl padding composer"
        padding="xl"
        placeholder="xl"
      />
      <ChatInput
        aria-label="2xl padding composer"
        padding="2xl"
        placeholder="2xl"
      />
      <ChatInput
        aria-label="3xl padding composer"
        padding="3xl"
        placeholder="3xl"
      />
    </ExampleStack>
  );
}

Size

import { ChatInput } from "density-base-ui";
import { ExampleStack } from "../ExampleLayout";

export default function ChatInputSizeExample() {
  return (
    <ExampleStack>
      <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" />
    </ExampleStack>
  );
}