Todos los componentes (204)

Tipo de IVA

Campos · VatRateSelect

Qué es y cuándo usarlo

Selector del tipo de IVA: 21 % general, 10 % reducido, 4 % superreducido y 0 % exento.

Cuándo usarlo

Líneas de factura, presupuestos, fichas de producto: cualquier sitio donde se elige un tipo de IVA.
Entrega el porcentaje como número (21), que es lo que luego se multiplica.
Con rates se ofrecen otros (un IGIC de Canarias, un tipo de otro país): los que no tienen nombre salen solo con su porcentaje.

Cuándo no

Un porcentaje libre: NumberField.

Teclado: el de Select: Abajo abre, las flechas recorren, Intro elige, Escape cierra.

Accesibilidad: es un Select, con su etiqueta («Tipo de IVA»), su ayuda y su error enlazados.

Aspecto fino: sin variables propias: son las de Select y el campo.

Cómo se ve

Precio de venta

Tipo de IVA

Base 129,90 € + IVA 27,28 € = 157,18 €.

<MoneyField label="Precio de venta" value={precio} onChange={setPrecio} max={5000} />
<VatRateSelect value={iva} onChange={setIva} />

Props

Se importa con import { VatRateSelect } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`defaultOpen`	`boolean`	La lista empieza abierta. Para fotografiar el panel en el banco.
`disabled`	`boolean`	—
`error`	`string`	—
`excludeFromTabOrder`	`boolean`	Fuera del orden del tabulador. Sigue siendo enfocable con la mano (`.focus()`), que es la diferencia con apagarlo: un control apagado no se puede enfocar de ninguna manera.
`hiddenLabel`	`boolean`	La etiqueta solo para el lector de pantalla. Para cuando el campo va dentro de otro que ya se explica solo (el prefijo de un telefono), nunca para ahorrar espacio: sin etiqueta a la vista no se sabe que se elige.
`hint`	`string`	—
`id`	`string`	Va al DISPARADOR, que es el nodo enfocable y el que lleva el papel del campo: es a el a quien hay que poder apuntar desde fuera con un `aria-controls`, un paso de una visita guiada o un atajo. Lo de dentro (la etiqueta, la lista, la ayuda) sigue con sus `id` propios, derivados de este cuando se pasa, para que no se repitan con dos selectores en la misma pagina.
`initialValue`	`number \| null`	—
`invalid`	`boolean`	—
`label`	`string`	—
`loading`	`boolean`	Las opciones estan llegando. Marca el campo como ocupado, enseña un anillo y una fila `loadingText` en la lista; las opciones que ya hubiera se quedan.
`loadingText`	`string`	Lo que dice la fila de carga. Por defecto, «Cargando…».
`name`	`string`	Para que el valor viaje en un formulario nativo.
`native`	`boolean`	Un `<select>` del SISTEMA en vez del panel propio. En un movil sale el selector de su sistema operativo, y es lo que se quiere cuando la lista es larga o se rellena con el dedo. Se pierden los iconos y las dos lineas por opcion (`renderOption`, `renderValue`, `icon`, `description`); los grupos (`group`) salen como `<optgroup>`. Mismo campo por fuera y mismas props.
`offset`	`number`	Separación en píxeles entre el campo y la lista. Por defecto, ninguna.
`onBlur`	`() => void`	Al salir del campo. Lo usa el formulario para marcar que se ha tocado.
`onChange`	`(rate: number \| null) => void`	—
`onChangeEvent`	`(event: ChangeEvent<HTMLSelectElement>) => void`	Con `native`: el evento del `<select>`, para migrar un manejador que lee `e.target.value`. `onChange` sigue entregando la clave, y se llaman los dos.
`onOpenChange`	`(open: boolean) => void`	—
`open`	`boolean`	Abierta o cerrada, mandado desde FUERA. Con esto el estado deja de vivir aqui: quien lo pasa decide, y `onOpenChange` le avisa de cada intento. Hace falta para abrir la lista desde otro sitio -un atajo de teclado, un paso de una visita guiada- sin tocar el disparador.
`panelWidth`	`"content" \| "trigger"`	Cuánto mide la lista de ancho. `trigger` (por defecto) la deja igual que el campo, que es lo que se espera de un selector normal. `content` la deja crecer hasta que quepan las opciones. Hace falta cuando el disparador es a propósito MÁS ESTRECHO que las opciones: el prefijo de un teléfono enseña «+34» y la lista dice «+34 · España». Medido antes de existir esto: el panel salía de 69 px y las 19 opciones aparecían cortadas a media palabra («Españ», «Portug»).
`placeholder`	`string`	Texto cuando no hay nada elegido. No sustituye a la etiqueta.
`placement`	`Placement`	Dónde sale la lista. Por defecto, pegada justo debajo del campo.
`rates`	`readonly number[]`	Los tipos que se ofrecen, de mayor a menor. Por defecto, los del IVA español (21, 10, 4 y 0).
`readOnly`	`boolean`	—
`renderOption`	`OptionRender<ListOption>`	Pinta el interior de cada opcion de la lista: un avatar, dos lineas, un precio. El nombre que lee el lector de pantalla sigue siendo `label`.
`renderValue`	`(option: SelectOption) => ReactNode`	Pinta lo elegido dentro del campo cerrado. Sin esto sale el icono y la etiqueta (o `shortLabel`). Lo que se anuncia es lo que se pinte, asi que conviene que lleve el texto.
`required`	`boolean`	—
`shouldCloseOnSelect`	`boolean`	Elegir una opcion NO cierra la lista. Por defecto la cierra, que es lo que espera cualquiera en un desplegable de una sola opcion; esto es para quien monta encima algo que deja seguir mirando.
`size`	`"sm" \| "md" \| "lg"`	—
`validationBehavior`	`"aria" \| "native"`	—
`value`	`number \| null`	El tipo elegido (`21`), controlado desde fuera.
`variant`	`FieldVariant`	—

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: