StofliUI - Librería de componentes UI accesibles y personalizables

Cargando...

import { Checkbox } from "stofli-ui";

Cargando...

Muestra cuatro estados del checkbox: normal, marcado, deshabilitado y requerido.

Cargando...

Usando la prop size: sm, md y lg.

Cargando...

Usando la prop variant: default, primary, secondary, success, warning y danger.

Cargando...

Usando la prop radius: none, sm, md y full.

Cargando...

Personaliza la apariencia del checkbox utilizando las propiedades de clase.

Cargando...

Prop	Tipo	Default	Descripción
`checked`	`boolean`	-	Estado controlado del checkbox
`defaultChecked`	`boolean`	`false`	Estado inicial del checkbox
`disabled`	`boolean`	`false`	Deshabilita el checkbox
`required`	`boolean`	`false`	Marca el checkbox como requerido
`label`	`string`	-	Texto de la etiqueta
`name`	`string`	-	Nombre del campo para formularios
`value`	`string`	-	Valor del checkbox
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Tamaño del checkbox
`variant`	`"default" \| "primary" \| "secondary" \| "success" \| "warning" \| "danger"`	`"default"`	Variante de estilo
`radius`	`"none" \| "sm" \| "md" \| "full"`	`"md"`	Radio de las esquinas
`className`	`string`	-	Clases para el icono de check
`wrapperClassName`	`string`	-	Clases para el contenedor principal
`checkboxClassName`	`string`	-	Clases para el elemento checkbox
`labelClassName`	`string`	-	Clases para la etiqueta
`onChange`	`(checked: boolean) => void`	-	Función llamada al cambiar el estado
`id`	`string`	-	ID personalizado para el checkbox
`ariaLabel`	`string`	-	Etiqueta ARIA personalizada
`ariaDescribedBy`	`string`	-	ID del elemento que describe el checkbox
`errorMessage`	`string`	-	Mensaje de error a mostrar

Checkbox