stylePriority (Experimental)

Defines the CSS specificity priority for input states. When multiple states are active (e.g., disabled + error + focus), styles are applied in this priority order: Default:

  1. Disabled (p0) - highest priority
  2. Error (p1) - medium priority
  3. Focus (p2) - lowest priority
// These are the default values
	let 
let stylePriority: {
    inputDisabledStyle: string;
    inputErrorStyle: string;
    inputFocusStyle: string;
}
stylePriority = {
	  inputDisabledStyle: stringinputDisabledStyle: 'p0',
	  inputErrorStyle: stringinputErrorStyle: 'p1',
	  inputFocusStyle: stringinputFocusStyle: 'p2'
	}

Example

	<script>
	  import OtpInput from 'svelte-otp-input';
	  
	  let numInputs = 4;
	  let otp = $state("");
	</script>
	
	<OtpInput
	  bind:value={otp}
	  numInputs={numInputs}
	  stylePriority={{
			inputDisabledStyle: 'p0',
			inputFocusStyle: 'p1',
			inputErrorStyle: 'p2'
	  }}
	/>