InputCheckbox

El componente InputCheckbox es un campo de entrada de tipo checkbox que permite al usuario seleccionar o deseleccionar una opción. Puede mostrar etiquetas y manejar validaciones, así como valores personalizados para las opciones activas e inactivas.

Ejemplo

Importación

Para importar el componente InputCheckbox, se puede hacer desde fenextjs

import { InputCheckbox } from "fenextjs";

Parámetros

Parámetro	Tipo	Requerido	Default	Descripcion
label	ReactNode	no	''	Etiqueta que se muestra al lado del checkbox.
labelPosition	'right' \| 'left'	no	'right'	Posición de la etiqueta en relación con el checkbox.
name	string	no	''	Atributo name del elemento input checkbox.
onChange	(checked: boolean) => void	no	undefined	Función que se ejecuta cuando se alterna el checkbox, recibe un valor booleano que indica si está seleccionado.
defaultValue	boolean	no	false	Valor predeterminado del checkbox cuando se renderiza por primera vez.
value	boolean	no	undefined	Valor controlado del checkbox.
disabled	boolean	no	false	Indica si el checkbox está deshabilitado.
onValidateCheck	() => Promise<void> \| void	no	undefined	Función que se ejecuta para validar el checkbox.
optional	boolean	no	false	Indica si el checkbox es opcional.
optionalText	string	no	'(optional)'	Texto que se muestra si el checkbox es opcional.
required	boolean	no	false	Indica si el checkbox es obligatorio.
requiredText	string	no	'*'	Texto que se muestra si el checkbox es obligatorio.
onActive	() => void	no	undefined	Función que se ejecuta cuando el checkbox se activa.
onInactive	() => void	no	undefined	Función que se ejecuta cuando el checkbox se desactiva.
valueActive	VT	no	undefined	Valor a pasar cuando el checkbox se activa.
valueInactive	VF	no	undefined	Valor a pasar cuando el checkbox se desactiva.
icon	ReactNode	no	<Check />	Ícono que se muestra junto al checkbox.

Storybook

Para ver el storybook del componente lo puede hacer con este link (opens in a new tab)

Usos

Básico

<InputCheckbox label="Acepto los términos y condiciones" />

Checkbox deshabilitado

<InputCheckbox label="No puedo seleccionar este" disabled={true} />

Checkbox obligatorio

<InputCheckbox label="Este checkbox es obligatorio" required={true} />

Checkbox opcional con texto

<InputCheckbox
  label="Este es opcional"
  optional={true}
  optionalText="(opcional)"
/>

Calendar Code