Message Input

Get Ritla UI

Pinned under a conversation: an attach button, the text field with an emoji button, and send.

Open in Figma

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

Add the component
$ npx ritla add message-input
Also works with shadcn: npx shadcn@latest add @ritla/message-input
Dependencies it brings
@phosphor-icons/react
Or copy by hand
Installing by hand copies the component's source into your project. The source comes with a Ritla UI license, so the CLI is the short way to the same files.

Usage

message-input.tsx

import { MessageInput } from "@/components/ui/message-input";<MessageInput label="Message" placeholder="Write a message" onSend={(text) => send(text)} />

API reference

MessageInput

Prop	Type	Default	Description
`placeholder`	`string`	None	Figma's Placeholder.
`label`	`string`	None	The field's name for screen readers.
`onSend`	`(text: string) => void`	None	Called with the trimmed text; the field then clears.
`onAttach / onEmoji`	`() => void`	None	Show the Attach and Emoji buttons.
`labels`	`{ attach?, emoji?, send? }`	None	The buttons' names in the page's language.
`value / onValueChange`	`string / (value: string) => void`	None	A controlled draft.
`disabled`	`boolean`	`false`	Disables the field and buttons.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Enter`	Sends the message.
`ShiftEnter`	Adds a new line.

ARIA

The field has a visually hidden label; the placeholder is not a label.
The buttons are named Attach, Emoji and Send; Send stays disabled until you type.

Arabic and RTL notes

Mirrors

The send arrow points left in Arabic, and Attach starts the row.

Does not mirror

The paperclip and the smiley don't mirror.

Numerals: Text is sent as typed.
Arabic typography: Text is body-16.
Mixed-direction text: The field is dir="auto": it follows the first letter you type.