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..." />Shape
Set shape to rounded (default), square, or circular.
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.
Size
The size prop sets the height, the font size and the horizontal padding of the input. It can be set to small, medium or large. The default is medium.
Content Before and After
contentBefore and contentAfter render content inside the wrapper, before and after the input. They accept a string, a snippet or a component such as an icon.
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.
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.
Component Props
| Name | Type | Default | Description |
|---|---|---|---|
shape | 'circular' | 'rounded' | 'square' | 'rounded' | Shape of the input surface, including its border and focus indicator. |
type | TextBoxTypes | 'text' | The type of the input element. |
value bindable | string | number | The current value of the input. | |
wrapperRef bindable | HTMLDivElement | null | The DOM reference of the wrapper element. | |
ref bindable | HTMLInputElement | null | 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: Event & unknown, 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 spread on the wrapper element. | |
HTMLInputAttributes without size |