messaging/DSChatInputBar

DSChatInputBar

messaging

since 0.1.0

Chat input field with send button, optional attachment button, and support for single-line or multi-line input.

iOS 17+macOS 14+watchOS 10+tvOS 17+visionOS 1+

Purpose

Text input for chat interfaces, messaging apps, and conversational UIs.

Interactive Reference

Live showroom

Need the full visual surface?

Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().

Best for exploring:

variants, states, categories, and real app examples in one place.

Props

Prop	Type	Default	Description
placeholder	String	"Type a message..."	Placeholder text when input is empty.
textreq	Binding<String>	—	Binding to the input text.
onSendreq	(String) -> Void	—	Called with the message when send is tapped.
onAttachment	(() -> Void)?	nil	Shows an attachment button when set.
sendIcon	String	"arrow.up.circle.fill"	SF Symbol for the send button.
attachmentIcon	String	"plus.circle"	SF Symbol for the attachment button.
multiline	Bool	false	Multi-line input that grows with the text.
isDisabled	Bool	false	Disables input and send.
maxLines	Int	5	Maximum lines before scrolling, in multi-line mode.

Examples

Basic chat input

Single-line input with send button.

swift

DSChatInputBar(
    placeholder: "Type a message...",
    text: $messageText,
    onSend: { message in
        sendMessage(message)
        messageText = ""
    }
)

With attachment support

Input with attachment button for photos/files.

swift

DSChatInputBar(
    text: $messageText,
    onSend: { sendMessage($0) },
    onAttachment: { showAttachmentPicker() }
)

Multi-line input

Grows up to 8 lines for longer messages.

swift

DSChatInputBar(
    placeholder: "Write your message...",
    text: $messageText,
    onSend: { sendMessage($0) },
    multiline: true,
    maxLines: 8
)

Disabled state

Disable input while waiting for a response.

swift

DSChatInputBar(
    text: $messageText,
    onSend: { sendMessage($0) },
    isDisabled: isWaitingForResponse
)

When to Use

✓ Use DSChatInputBar for:

• Chat and messaging interfaces
• AI assistant input fields
• Customer support chat widgets
• Comment input for social features

✗ Avoid using for:

• Form text inputs (use DSTextField)
• Search bars (use DSSearchField)
• Long-form content editing (use TextEditor directly)

Consider instead:

DSTextField

For form inputs and structured data

DSSearchField

For search functionality

Accessibility

VoiceOver

Announces 'Chat input' with current text value. Empty state announced as 'Empty'. Send button announces 'Send message'.

Keyboard

• Return to send (single-line)
• Shift+Return for new line (multi-line)
• Tab to focus send/attachment buttons

Dynamic Type

✓ Supported

Contrast

Colors follow design best practices for input visibility

Traits

Input field with text value.isButton for send/attachment buttonsDisabled state when text is empty

Related Components

MessageBubble TextField