> Signature

Signature

Composant de signature par le doigt ou la souris. Différent entre web et mobile. La hauteur doit être fixe.

TagsuiInformationsExperimentalExemples2StylesDisponibles

Example

Le 09/09/2026

export const Example = () => {
  const containerHeight = 100;
  const [value, setValue] = React.useState<string | null>(null);
  return (
    <Box width={'100%'}>
      <Signature height={containerHeight} onChange={setValue} />
      {value && (
        <>
          <Typography fontSize={24}>Signature capturée :</Typography>
          <Image contentFit="contain" height={containerHeight} width="100%" source={value} />
        </>
      )}
    </Box>
  );
};

CustomLabels

Date : 09/09/2026

export const CustomLabels = () => {
  const containerHeight = 100;
  const [value, setValue] = React.useState<string | null>(null);
  return (
    <Box width={'100%'}>
      <Signature height={containerHeight} onChange={setValue} dateLabel="Date :" clearButtonLabel="Clear" />
      {value && (
        <>
          <Typography fontSize={24}>Captured signature:</Typography>
          <Image contentFit="contain" height={containerHeight} width="100%" source={value} />
        </>
      )}
    </Box>
  );
};

Alveole UI Kit — v1.8.4