<.dm_pin_input id="pin-input-single-default" label="Enter PIN" length={4} />

<.dm_pin_input
  id="pin-input-single-masked"
  label="Masked PIN"
  name="pin"
  value="1234"
  length={4}
 />

<.dm_pin_input
  id="pin-input-single-circle"
  label="Circle Shape"
  length={4}
  color="primary"
  shape="circle"
 />

<.dm_pin_input id="pin-input-single-shapes-and-variants">
  <div class="space-y-4">
    <.dm_pin_input length={4} label="Default" />
    <.dm_pin_input length={4} shape="circle" label="Circle" />
    <.dm_pin_input length={4} variant="filled" label="Filled" />
    <.dm_pin_input length={6} compact={true} label="Compact" />
    <.dm_pin_input length={4} dots={true} visible={false} value="1234" label="Dots" />
    <.dm_pin_input length={4} size="lg" shape="circle" variant="filled" label="Large filled circle" />
  </div>
</.dm_pin_input>

<.dm_pin_input id="pin-input-single-states">
  <div class="space-y-4">
    <.dm_pin_input length={4} error={true} error_message="Invalid PIN" label="Error" />
    <.dm_pin_input length={4} success={true} label="Success" helper="PIN verified!" />
    <.dm_pin_input length={4} disabled={true} label="Disabled" />
  </div>
</.dm_pin_input>