cosmemilton-ui/clientFormularios

CmInputOTP

Use para token de confirmacao, MFA e codigos temporarios onde cada digito precisa de uma celula.

Import

tsx
import { CmInputOTP } from "cosmemilton-ui/client";

Codigo de verificacao

Codigo de verificacao

Valor atual: 482

tsx
"use client";

import { useState } from "react";
import { CmInputOTP } from "cosmemilton-ui/client";
import { CmStack, CmText } from "cosmemilton-ui/server";

export default function Example() {
  const [value, setValue] = useState("482");

  return (
    <CmStack gap="sm">
      <CmText weight="semibold">Codigo de verificacao</CmText>
      <CmInputOTP value={value} onChange={setValue} length={6} />
      <CmText tone="muted">Valor atual: {value || "vazio"}</CmText>
    </CmStack>
  );
}

API rapida

CmInputOTP

valueonChangelengthclassName