PrimitiveDisponible
Calendar
Selección de días mediante teclado y navegación por meses.
Instalación
Agrega el componente y sus dependencias desde el registro que está ejecutándose en tu computadora.
terminal
npx shadcn@latest add https://brutallab.facilito.dev/r/calendar.jsonUso
Importa el componente en tu proyecto y conserva el código bajo tu control.
tsx
'use client';
import { useState } from 'react';
import { Calendar } from '@/components/ui/calendar';
export default function Demo() {
const [date, setDate] = useState<Date | undefined>(new Date(2026, 8, 12));
return (
<div className="grid gap-4">
<Calendar
mode="single"
selected={date}
onSelect={setDate}
defaultMonth={new Date(2026, 8, 1)}
/>
<output className="bl-type-small">
{date ? date.toLocaleDateString('en-US') : 'Choose a day.'}
</output>
</div>
);
}
Estados e interacción
Aspecto, comportamiento y comprobación con teclado.
- La composición hereda los estados de sus controles. Prueba valores vacíos, contenido, carga y error cuando correspondan a la aplicación.
- Los ejemplos de esta página son ejecutables; el código mostrado usa los mismos componentes. La lógica de negocio pertenece al consumidor.
- Prueba el ejemplo con Tab y Shift+Tab. El foco debe seguir visible en ambos temas.
Referencia API
Propiedades propias de BrutalLab. También acepta los atributos nativos correspondientes.
| Prop | Tipo | Default | Descripción |
|---|---|---|---|
| mode | single / multiple / range | — | Selection model. |
| selected | Date or Date[] or DateRange | — | Controlled selection. |
| onSelect | function | — | Reports the selected date or range. |
Accesibilidad
Reglas que deben conservarse cuando el componente se adapte a un producto.
Conserva las etiquetas visibles y el HTML semántico del ejemplo.
Mantén el foco visible y comprueba la composición mediante el teclado.
Personaliza el aspecto con className sin reemplazar los atributos ARIA de la primitiva.