Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. Read about intended use and customization.
Experimental: The AI extension and its component APIs may change in the future. Please give us feedback on your experience with them.
Properties#
| Type | Description | |
|---|---|---|
dropShadow | boolean | (optional) Add a drop shadow. Defaults to true for the compact variant and false for the default variant. |
icon | IconIcon | (optional) Leading icon in the compact variant. Set to null to hide it. Defaults to the Aino icon. |
children | React.ReactNode | (optional) Context shown above the input, such as removable attachment or reference chips. |
startActions | React.ReactNode | (optional) Custom controls at the start of the toolbar, or before the textarea in the compact variant. The application owns their labels, behavior and disabled state. |
endActions | React.ReactNode | (optional) Custom controls before the built-in Send or Stop button. The application owns their labels, behavior and disabled state. |
variant | "default" "compact" | (optional) Use default for a multiline card with the send button below the text, or compact for an input with a leading icon and inline actions. The compact send button is hidden while the input is empty. |
value | string | (optional) The text value. Use it together with onChange to control the value. Without it, the text is cleared after submit. |
placeholder | string | (optional) Placeholder text. Defaults to a translated text. |
label | string | (optional) Label for screen readers. Defaults to a translated text. |
isBusy | boolean | (optional) Prevent submitting while a reply is pending or streaming. Shows a stop button when onStop is given. |
characterCounter | number | (optional) Show a character counter with the given maximum number of characters. Text that is longer is not sent. |
disabled | boolean | (optional) Disable the input and built-in Send or Stop button. Disable custom actions separately. |
textareaProps | TextareaProps | (optional) Properties forwarded to the Textarea, e.g. status for an error message. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Translations#
| Key | nb-NO | en-GB | sv-SE | da-DK |
|---|---|---|---|---|
promptLabel | Melding | Message | Meddelande | Besked |
promptPlaceholder | Skriv en melding | Write a message | Skriv ett meddelande | Skriv en besked |
send | Send | Send | Skicka | Send |
stop | Stopp | Stop | Stoppa | Stop |