Entrada de datos
Select
Un componente de selector nativo con soporte para placeholder, variantes de bordes redondeados, error y estado deshabilitado.
Tests
100%
Block
Uso
El componente SSelect renderiza un elemento HTML <select> nativo. Usa v-model para vincular el valor seleccionado y proporciona elementos <option> a traves del slot por defecto.
Placeholder
Usa la prop placeholder para mostrar una opcion placeholder deshabilitada cuando no hay un valor seleccionado.
Bordes Redondeados
Usa la prop rounded para controlar el radio de borde del select.
Error
Establece error en true para mostrar el select con estilo de error.
Deshabilitado
Establece disabled en true para evitar la interaccion del usuario.
Block
El componente SSelectBlock envuelve a SSelect con una etiqueta, texto de ayuda y texto de error. Combina todas las props del componente base con label, helpText y errorText. Cuando se proporciona errorText, el estado de error se aplica automaticamente.
Props
| Prop | Tipo | Default | Descripcion |
|---|---|---|---|
modelValue | string | number | - | El valor seleccionado (v-model) |
placeholder | string | - | Texto de la opcion placeholder deshabilitada |
rounded | 'both' | 'left' | 'right' | 'none' | 'full' | 'both' | Estilo de radio de borde |
error | boolean | false | Muestra estilos de error |
disabled | boolean | false | Deshabilita el select |
class | string | - | Clases CSS adicionales |
Eventos
| Evento | Payload | Descripcion |
|---|---|---|
update:modelValue | string | number | undefined | Se emite cuando el valor seleccionado cambia |
Slots
| Nombre | Descripcion |
|---|---|
default | Los elementos <option> a renderizar dentro del select |