<.dm_otp_input id="otp-input-single-default" length={6} />

<.dm_otp_input
  id="otp-input-single-with-label"
  label="Verification Code"
  length={6}
  color="primary"
  helper="We sent a 6-digit code to your email"
 />

<.dm_otp_input id="otp-input-single-masked" label="Enter PIN" length={4} masked />

<.dm_otp_input id="otp-input-single-sizes">
  <div class="space-y-4">
    <.dm_otp_input length={4} size="sm" label="Small" />
    <.dm_otp_input length={4} label="Default" />
    <.dm_otp_input length={4} size="lg" label="Large" />
  </div>
</.dm_otp_input>

<.dm_otp_input id="otp-input-single-states">
  <div class="space-y-4">
    <.dm_otp_input length={4} error={true} error_message="Invalid code" label="Error" />
    <.dm_otp_input length={4} success={true} label="Success" helper="Verified!" />
    <.dm_otp_input length={4} disabled={true} label="Disabled" />
  </div>
</.dm_otp_input>