Slider
Le curseur de plage, bâti sur un input range natif : il se pilote aussi bien au doigt qu'aux flèches du clavier.
Utilisation
import { Slider } from "@monstera/ui"5 000 €
Bornes
minLabel et maxLabel décrivent la plage, ils ne suivent pas le curseur. Ici la valeur courante est affichée par l'écran, sous le curseur.
Bulle et graduations
tooltip pose au-dessus du curseur une bulle qui le suit ; une chaîne y sert aussi de valeur annoncée au lecteur d'écran. ticks répartit ses graduations d'un bord à l'autre de la piste, sans lien avec step.
36 mois
Pas
step contraint les valeurs atteignables, ici à l'année pleine. Sans lui, l'input range se règle à l'unité.
Sans bornes affichées
Sans minLabel ni maxLabel, la ligne de libellés disparaît et le curseur se réduit à sa piste. La plage par défaut va de 0 à 100.
API
Prop
Type
Select
Le choix dans une liste fermée, à l'intérieur d'un formulaire. Le kit habille un select natif au lieu de redessiner une liste : celle qui s'ouvre est donc celle du système, avec sa navigation clavier, sa recherche à la frappe et sa roue plein écran sur téléphone.
Switch
L'interrupteur d'un réglage qui prend effet tout de suite. Switch pose le libellé à gauche et le toggle à droite, SwitchItem donne le toggle seul.