> DurationInput

DurationInput

Saisie d'une

durée

au format HH:MM (ex. 06:15 pour 6 heures 15 minutes). À ne pas confondre avec

TimeInput

, qui représente une

heure d'horloge

(ex. 09:30 du matin). | | DurationInput | |---|---|---| | Sémantique | Durée écoulée | | Exemple | 35:00 (35h00 de travail) | | Heures valides | 00–99 | | HTML web | <input type="text"> |

Il n'existe pas de <input type="duration"> en HTML. Voir whatwg/html#5488.

TagsuiExemples2StylesDisponibles

Default

Durée

Temps passé sur le terrain

export const Default = () => (
  <Box width="100%" p={8}>
    <Grid gap={8}>
      <Grid.Column size={{ mobile: 12, desktop: 4 }}>
        <DurationInput label="Durée" />
      </Grid.Column>
      <Grid.Column size={{ mobile: 12, desktop: 4 }}>
        <DurationInput label="Durée" value="06:15" />
      </Grid.Column>
      <Grid.Column size={{ mobile: 12, desktop: 4 }}>
        <DurationInput label="Durée" value="01:30" hint="Temps passé sur le terrain" />
      </Grid.Column>
    </Grid>
  </Box>
);

States

Erreur

Heure invalide (minutes 00–59)

Succès

Enregistré

Désactivé

export const States = () => (
  <Box width="100%" p={8}>
    <Grid gap={8}>
      <Grid.Column size={{ mobile: 12, desktop: 4 }}>
        <DurationInput label="Erreur" value="25:70" error="Heure invalide (minutes 00–59)" />
      </Grid.Column>
      <Grid.Column size={{ mobile: 12, desktop: 4 }}>
        <DurationInput label="Succès" value="06:15" success="Enregistré" />
      </Grid.Column>
      <Grid.Column size={{ mobile: 12, desktop: 4 }}>
        <DurationInput label="Désactivé" value="06:15" disabled />
      </Grid.Column>
    </Grid>
  </Box>
);

Alveole UI Kit — v1.8.4