Todos los componentes (204)
Hora
Fechas y hora · TimeField
Qué es y cuándo usarlo
Una hora escrita por partes, como el campo de fecha: la hora y los minutos (y los segundos o el AM/PM si tocan) son segmentos que se escriben con números o se suben y bajan con las flechas, sin abrir nada y sin poder teclear las 25:70. Los valores son objetos TimeValue ({ hour, minute, second }, la hora de 0 a 23 siempre), no cadenas.
Cuándo usarlo
- La hora de una cita, de una recogida, de un envío programado.
granularity="second"para duraciones cortas o marcas de tiempo;"hour"si solo cuenta la hora en punto.backpara lo que acompaña a la hora: una zona («CET»), un botón pequeño.icon={false}quita el reloj.hiddenLabelen una rejilla de horas donde el nombre de la columna ya está escrito una vez arriba.namepara que la hora viaje en un formulario nativo.
Cuándo no
- El día:
DatePicker. Si hacen falta los dos, van en dos campos, uno al lado del otro. - El horario de apertura de un negocio, día a día y por franjas:
WeeklySchedule. - Elegir entre huecos libres de una agenda:
SlotPicker.
Teclado: cada segmento es una parada de Tab, y flecha izquierda y derecha también pasan de uno a otro. Arriba y abajo suben y bajan solo el segmento con el foco, no la hora entera; Inicio y Fin lo llevan a sus extremos; se escribe el número directamente y Retroceso lo borra.
Accesibilidad: la etiqueta es obligatoria y nombra el grupo; con hiddenLabel se esconde a la vista, nunca al lector. La ayuda queda enlazada al grupo. Con error, cada segmento se marca como no válido y lleva el mensaje como descripción, que es donde está el foco. El reloj es adorno.
Aspecto fino: variables CSS de la caja, las de todos los campos: --amset-field-height, -padding, -font, -label, -description, -radius, -background y -border. Los segmentos y el reloj son los del campo de fecha, y se ajustan con sus mismas variables: --amset-date-target y --amset-date-icon. Una fecha y una hora puestas una al lado de la otra se ven iguales.
Contexto: va dentro de LocaleProvider (o de AmsetProvider). El idioma decide si son 12 o 24 horas: en es-ES, 24; cycle lo fuerza.
Cómo se ve
<TimeField label="Hora de recogida" defaultValue={{ hour: 10, minute: 30, second: 0 }} hint="De 10:00 a 20:00" />
<TimeField label="Hora de la cita" defaultValue={{ hour: 20, minute: 45, second: 0 }} error="La tienda cierra a las 20:00" />Props
Se importa con import { TimeField } from '@amset/ui'. Las obligatorias van marcadas.
| Prop | Tipo | Para qué sirve |
|---|---|---|
labelobligatoria | string | Obligatoria: un campo sin etiqueta visible no entra en la libreria. |
back | ReactNode | Contenido detras de la hora: una zona ("CET"), un boton. |
className | string | — |
cycle | 12 | 24 | 12 o 24 horas. Sin esto manda el idioma (`es-ES` son 24), que es lo correcto en la practica: forzar 12 en español obliga a leer "PM". |
defaultValue | T | null | La hora al empezar, sin controlarla desde fuera. |
disabled | boolean | — |
error | string | Mensaje de error. Al pasarlo, el campo queda marcado como invalido. |
granularity | TimeGranularity | Por defecto `minute`: la hora suelta casi nunca es lo que se pide. |
hiddenLabel | boolean | Oculta la etiqueta a la vista, nunca al lector. Para una rejilla de horas donde el nombre de la columna ya esta escrito una vez arriba. |
hint | string | — |
icon | boolean | Reloj delante de los segmentos. Puesto, porque un campo de hora sin reloj no se reconoce. |
invalid | boolean | — |
name | string | Para que la hora viaje en un formulario nativo. |
onChange | (value: PlainTime) => void | Solo se avisa con una hora ENTERA: media hora no es un valor, asi que quien escucha no tiene que filtrar estados a medias. |
placeholderValue | PlainTime | De que hora arranca un trozo VACIO al tocarlo con una flecha. Sin esto, de la medianoche. Con ella, de donde tenga sentido: en un campo de citas que empiezan a las nueve, subir hora a hora desde las 0:00 es trabajo que no tiene por que hacer nadie. No es un valor: el campo sigue vacio hasta que se toca, y lo que se envia sigue siendo nada. Para un valor inicial esta `defaultValue`. |
readOnly | boolean | — |
required | boolean | — |
shouldForceLeadingZeros | boolean | Ceros delante en la hora. Puesto por defecto, que es lo que se espera de un campo de hora: «09:05» y no «9:05». |
size | "sm" | "md" | "lg" | — |
validationBehavior | "aria" | "native" | `aria` (por defecto) anuncia el estado sin que el navegador interrumpa el envio con su globo; `native` añade ademas su validacion. |
value | T | null | La hora, controlada desde fuera. |
variant | FieldVariant | — |
Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.
En el banco de pruebas
Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: