Blife UI

Tamaños

El componente QuantityInput soporta tres tamaños: small, medium y large.

Controlado

Puedes controlar el valor del componente usando las propiedades value y onValueChange. También puedes establecer valores mínimos y máximos para limitar el rango de valores permitidos.

Cantidad

Solo lectura

Usa la propiedad readOnly para hacer el componente de solo lectura. Los botones de incremento y decremento también se deshabilitarán.

Deshabilitado

Usa la propiedad disabled para deshabilitar completamente el componente, incluyendo el input y los botones de incremento/decremento.

Ajustando el ancho

Usa la propiedad className para ajustar el ancho del componente.

Valor minimo y maximo

Usa las propiedades min y max para establecer los valores mínimo y máximo permitidos.

Cantidad de productos

Puedes seleccionar entre 1 y 10 productos

Error

Usa la propiedad error para establecer el estado de error del componente.

Cantidad de productos

La cantidad de productos no puede ser mayor a 10

Props

Prop	Tipo	Requerido	Descripción
`value`	`number`	-	Valor controlado del componente.
`defaultValue`	`number`	-	Valor por defecto del componente cuando no está controlado. Por defecto es `1`.
`onValueChange`	`(value: number) => void`	-	Callback que se ejecuta cuando el valor cambia.
`min`	`number`	-	Valor mínimo permitido. Por defecto es `0`.
`max`	`number`	-	Valor máximo permitido. Por defecto es `Infinity`.
`step`	`number`	-	Incremento o decremento aplicado al hacer clic en los botones. Por defecto es `1`.
`clampOnBlur`	`boolean`	-	Si es `true`, ajusta el valor al rango permitido cuando el input pierde el foco. Por defecto es `true`.
`size`	`'small' \| 'medium' \| 'large'`	-	Tamaño del componente.
`readOnly`	`boolean`	-	Hace el componente de solo lectura.
`disabled`	`boolean`	-	Deshabilita el componente completamente.
`className`	`string`	-	Clases CSS adicionales para el contenedor principal.
`classNames`	`{ addon?: string; input?: string }`	-	Clases CSS para diferentes partes del componente.
`...rest`	`ComponentProps<typeof InputText>`	-	Todas las props adicionales del componente InputText (como `placeholder`, `id`, etc.).

Quantity Input