componente · @solu30/ui-kit/input

CheckboxGroup

Checkbox group with grid layout, max selections enforcement, and CSS transition animations.

4 sitios de import en 2 de 15 verticales — un archivo que la importa cuenta una vez, monte una instancia o veinte.

easycharter
raquetea

La parte, adentro de su padre

Cargando el espécimen…

Éste es el conjunto completo. Abajo, los mismos casos por separado, cada uno con su código.

CheckboxGroup es una parte de Checkbox: sola no significa nada. Así que el escenario monta el padre completo, y lo que se ve incluye más piezas que la de esta ficha.

Cómo se usa

import { CheckboxGroup } from '@solu30/ui-kit/input'

Props

9 props declaradas en los tipos de la versión instalada.
Prop	Requerida	Tipo	Qué hace
options	sí	`readonly CheckboxOption<T>[]`	Array of checkbox options
values	sí	`T[]`	Currently selected values
onChange	sí	`(values: T[]) => void`	Callback when selection changes
columns	opcional	`1 \| 2 \| 3 \| 4`	Number of columns in the grid layout
maxSelections	opcional	`number`	Maximum number of selections allowed
disabled	opcional	`boolean`	Whether the group is disabled
className	opcional	`string`	Additional CSS class
label	opcional	`string`	Label shown above the group
error	opcional	`string`	Error message

Con tope de selección

Cuando varias opciones comparten un mismo rótulo y hay que decidir cuántas se pueden marcar a la vez, sin escribir un `Checkbox` por cada una — «maxSelections» bloquea nuevas marcas al llegar al tope, sin borrar las ya hechas.

Cargando el espécimen…

export function CheckboxGrupo() {
  const [amenities, setAmenities] = useState<string[]>(['wifi'])

  return (
    <CheckboxGroup
      label="Servicios incluidos"
      options={AMENITY_OPTIONS}
      values={amenities}
      onChange={setAmenities}
      columns={2}
      maxSelections={3}
    />
  )
}

De specimens/input.tsx · CheckboxGrupo: el espécimen del Muestrario, no un ejemplo oficial del paquete. Muestra cómo se usa la pieza de verdad, montada contra los tipos instalados —eso es lo que vale— pero no es documentación del kit.

Ejemplo del paquete

<CheckboxGroup
  options={[{ value: 'wifi', label: 'Wi-Fi' }, { value: 'pool', label: 'Pool' }]}
  values={selected}
  onChange={setSelected}
  columns={2}
  maxSelections={3}
/>

Del @example del JSDoc de @solu30/ui-kit, sin editar: son 65 de los 541 símbolos. La sangría y los renglones en blanco son los del paquete.