TextBox

The TextBox control lets a user type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform, plaintext format.

Usage

<script>
	import { TextBox } from 'fluentui-svelte';
</script>

<TextBox type="text" placeholder="Type here..." />

Type

The `type` prop specifies the type of input element. It can be set to various types such as `text`, `search`, `email`, `url`, `tel`, `password`, or `number`. This determines the behavior and validation of the input.

View Code

<TextBox type="text" placeholder="Text" />
<TextBox type="search" placeholder="Search" />
<TextBox type="password" placeholder="Password" />
<TextBox type="number" placeholder="Number" />

Readonly

The `readonly` prop makes the input field read-only, preventing users from modifying its value. This is useful for displaying information that should not be edited.

View Code

<TextBox readonly value="Read-only value" />

Hide Buttons

The `hideActionButtons` prop allows you to hide the extra action buttons in the input, such as clear or submit buttons. This can be useful for a cleaner UI when those actions are not needed.

View Code

<TextBox type="search" hideActionButtons placeholder="No action buttons" />

Component Props

Name	Type	Default	Description
`type`	`TextBoxTypes`	`'text'`	The type of the input element.
`value` bindable	`string` \| `number`		The current value of the input.
`wrapperRef` bindable	`HTMLDivElement`		The DOM reference of the wrapper element.
`ref` bindable	`HTMLInputElement`		The DOM reference of the input element.
`placeholder`	`string`	`'Fluent TextBox'`	The placeholder text for the input.
`hideActionButtons`	`boolean`		Whether to hide the extra action buttons in the input.
`justify`	`boolean`		Make the input fill the full width of the container.
`contentBefore`	`string` \| `Snippet` \| `Component`		Content rendered before the input, inside the wrapper.
`contentAfter`	`string` \| `Snippet` \| `Component`		Content rendered after the input, inside the wrapper.
`size`	`'small'` \| `'medium'` \| `'large'`	`'medium'`	The size of the input element.
`textChanged`	`(e: InputEvent, text: string) => void`		Occurs when content changes in the text box.
`querySubmitted`	`(e: MouseEvent` \| `KeyboardEvent, query: string) => void`		The QuerySubmitted event occurs when: 1. The input type is 'search'. 2. While the focus is in the text box, press Enter or click the query icon.
`onClear`	`(e: MouseEvent) => void`		Occurs when the clear button is clicked.
`children`	`Snippet`		The children elements to render inside the input.
`wrapperAttributes`	`HTMLAttributes`		The attributes to apply to the wrapper element.
`HTMLInputAttributes` without `size`