TextBox

El control TextBox permite a un usuario escribir texto en una aplicación. Normalmente se usa para capturar una sola línea de texto, pero puede configurarse para capturar varias líneas. El texto se muestra en pantalla en un formato de texto sin formato simple, uniforme.

Uso

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

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

Tipo

La prop `type` especifica el tipo de elemento de entrada. Puede establecerse en varios tipos como `text`, `search`, `email`, `url`, `tel`, `password` o `number`. Esto determina el comportamiento y la validación de la entrada.

Ver Código

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

Solo lectura

La prop `readonly` hace que el campo de entrada sea de solo lectura, evitando que los usuarios modifiquen su valor. Esto es útil para mostrar información que no debe editarse.

Ver Código

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

Ocultar botones

La prop `hideActionButtons` te permite ocultar los botones de acción adicionales en la entrada, como los botones de limpiar o enviar. Esto puede ser útil para una interfaz más limpia cuando esas acciones no son necesarias.

Ver Código

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

Propiedades del componente

Name	Type	Default	Description
`type`	`TextBoxTypes`	`'text'`	El tipo del elemento input.
`value` bindable	`string` \| `number`		El valor actual del input.
`wrapperRef` bindable	`HTMLDivElement`		La referencia DOM del elemento contenedor.
`ref` bindable	`HTMLInputElement`		La referencia DOM del elemento de entrada.
`placeholder`	`string`	`'Fluent TextBox'`	El texto de marcador de posición de la entrada.
`hideActionButtons`	`boolean`		Si se deben ocultar los botones de acción adicionales de la entrada.
`justify`	`boolean`		Hace que el input ocupe todo el ancho del contenedor.
`contentBefore`	`string` \| `Snippet` \| `Component`		Contenido que se renderiza antes del input, dentro del wrapper.
`contentAfter`	`string` \| `Snippet` \| `Component`		Contenido que se renderiza después del input, dentro del wrapper.
`size`	`'small'` \| `'medium'` \| `'large'`	`'medium'`	El tamaño del elemento input.
`textChanged`	`(e: InputEvent, text: string) => void`		Ocurre cuando cambia el contenido del text box.
`querySubmitted`	`(e: MouseEvent` \| `KeyboardEvent, query: string) => void`		El evento QuerySubmitted ocurre cuando: 1. El tipo del input es 'search'. 2. Con el foco en el text box, se pulsa Enter o se hace clic en el icono de búsqueda.
`onClear`	`(e: MouseEvent) => void`		Ocurre cuando se hace clic en el botón de limpiar.
`children`	`Snippet`		Los elementos hijos que se renderizan dentro de la entrada.
`wrapperAttributes`	`HTMLAttributes`		Los atributos que se aplican al elemento wrapper.
`HTMLInputAttributes` without `size`