StofliUI - Librería de componentes UI accesibles y personalizables

Cargando...

import { Autocomplete } from "stofli-ui";

Cargando...

Un autocompletado simple con opciones básicas.

Cargando...

Organiza las opciones en grupos para una mejor navegación.

Cargando...

Estado deshabilitado del componente.

Cargando...

El componente puede mostrar un título descriptivo sobre el campo de entrada.

Cargando...

Puedes indicar que un campo es obligatorio usando la prop required, que mostrará un asterisco rojo.

Cargando...

Es posible deshabilitar opciones específicas usando la propiedad disabled en las opciones individuales.

Cargando...

El componente admite diferentes variantes de color para adaptarse a diferentes contextos.

Cargando...

Puedes personalizar cualquier parte del componente usando las propiedades de className con clases de Tailwind CSS.

Cargando...

Prop	Tipo	Default	Descripción
`options`	`AutocompleteOption[]`	`[]`	Opciones disponibles para seleccionar
`value`	`string`	-	Valor seleccionado (control externo)
`onChange`	`(value: string) => void`	-	Función llamada al cambiar la selección
`placeholder`	`string`	`"Selecciona una opción..."`	Placeholder del input cuando no hay selección
`title`	`string`	-	Título descriptivo sobre el campo
`required`	`boolean`	`false`	Indica si el campo es requerido
`className`	`string`	-	Clases adicionales para el componente
`containerClassName`	`string`	-	Clases para el contenedor principal
`inputClassName`	`string`	-	Clases para el input
`dropdownClassName`	`string`	-	Clases para el menú desplegable
`itemClassName`	`string`	-	Clases para los elementos de la lista
`iconClassName`	`string`	-	Clases para los iconos
`sectionTitleClassName`	`string`	-	Clases para los títulos de sección
`disabled`	`boolean`	`false`	Deshabilita el componente completo
`variant`	`"default" \| "primary" \| "secondary" \| "success" \| "warning" \| "danger"`	`"default"`	Variante de estilo

Autocomplete