Noora (0.11.0)

Digit Input

Different input types for various validation patterns Open in playground 
<.digit_input id="digit-input-types-numeric" type="numeric" placeholder="•" characters={6}/>
<.digit_input
  id="digit-input-types-alphanumeric"
  type="alphanumeric"
  placeholder="•"
  characters={4}
/>
<.digit_input
  id="digit-input-types-alphabetic"
  type="alphabetic"
  placeholder="•"
  characters={3}
/>
Different character lengths for various use cases Open in playground 
<.digit_input
  id="digit-input-character-counts-short-code"
  type="numeric"
  placeholder="•"
  characters={4}
/>
<.digit_input
  id="digit-input-character-counts-medium-code"
  type="numeric"
  placeholder="•"
  characters={6}
/>
<.digit_input
  id="digit-input-character-counts-long-code"
  type="numeric"
  placeholder="•"
  characters={8}
/>
One-time password specific configurations Open in playground 
<.digit_input
  id="digit-input-otp-otp-enabled"
  type="numeric"
  otp
  placeholder="•"
  characters={6}
/>
<.digit_input
  id="digit-input-otp-otp-sms-code"
  type="numeric"
  otp
  placeholder="0"
  characters={4}
/>
Different input states and error conditions Open in playground 
<.digit_input id="digit-input-states-default" type="numeric" placeholder="•" characters={4}/>
<.digit_input
  disabled
  id="digit-input-states-disabled"
  type="numeric"
  placeholder="•"
  characters={4}
/>
<.digit_input
  error
  id="digit-input-states-error"
  type="numeric"
  placeholder="•"
  characters={4}
/>
Different placeholder styles Open in playground 
<.digit_input
  id="digit-input-placeholders-dot-placeholder"
  type="numeric"
  placeholder="•"
  characters={6}
/>
<.digit_input
  id="digit-input-placeholders-dash-placeholder"
  type="numeric"
  placeholder="-"
  characters={6}
/>
<.digit_input id="digit-input-placeholders-no-placeholder" type="numeric" characters={6}/>