messaging/DSChatInputBar

DSChatInputBar

messaging

since v1.2

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

iOS 17+macOS 14+

Purpose

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

Props

Prop	Type	Default	Description
textreq	Binding<String>	—	Binding to the input text
placeholder	String	"Message..."	Placeholder text when input is empty
onSendreq	() -> Void	—	Action to perform when send button is tapped
onAttachment	(() -> Void)?	nil	Optional action for attachment button (shows button if provided)
multiline	Bool	false	Enable multi-line input with TextEditor
maxLines	Int	5	Maximum number of lines for multi-line input
isDisabled	Bool	false	Disable input and send button

Examples

Basic chat input

Simple single-line input with send button.

swift

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

With attachment support

Input with attachment button for photos/files.

swift

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

Multi-line input

TextEditor-based input for longer messages.

swift

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

Disabled state

Disable input while waiting for response.

swift

DSChatInputBar(
    text: $messageText,
    onSend: { sendMessage() },
    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