InputOTP

const inputOtpFixture = {
  id: "inputotp",
  length: 6,
  // Four of six boxes filled, so every adapter's demo shows the same
  // half-filled state: the filled prefix, two empty boxes, and the caret
  // position the paste/backspace helpers key off.
  otpValue: "4821",
  label: "One-time code",
} satisfies {
  id: string;
  length: number;
  otpValue: string;
  label: string;
};
 
import { InputOTP } from "@grassroot/ui-react";
 
export default function InputOTPDemo() {
  return (
    <div>
      <InputOTP
        length={inputOtpFixture.length}
        defaultValue={inputOtpFixture.otpValue}
        label={inputOtpFixture.label}
      />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
const inputOtpFixture = {
  id: "inputotp",
  length: 6,
  // Four of six boxes filled, so every adapter's demo shows the same
  // half-filled state: the filled prefix, two empty boxes, and the caret
  // position the paste/backspace helpers key off.
  otpValue: "4821",
  label: "One-time code",
} satisfies {
  id: string;
  length: number;
  otpValue: string;
  label: string;
};
 
import { InputOTP } from "@grassroot/ui-vue";
const otp = ref(inputOtpFixture.otpValue);
</script>
<template>
  <div>
    <InputOTP v-model="otp" :length="inputOtpFixture.length" :label="inputOtpFixture.label" />
  </div>
</template>

import { Component } from "@angular/core";
const inputOtpFixture = {
  id: "inputotp",
  length: 6,
  // Four of six boxes filled, so every adapter's demo shows the same
  // half-filled state: the filled prefix, two empty boxes, and the caret
  // position the paste/backspace helpers key off.
  otpValue: "4821",
  label: "One-time code",
} satisfies {
  id: string;
  length: number;
  otpValue: string;
  label: string;
};
 
import { GrassrootInputOTP } from "@grassroot/ui-angular";
@Component({
  selector: "app-input-otp-demo",
  standalone: true,
  imports: [GrassrootInputOTP],
  template: `<div>
    <grassroot-input-otp
      [length]="fixture.length"
      [value]="fixture.otpValue"
      [label]="fixture.label"
    />
  </div>`,
})
export class InputOTPDemoComponent {
  protected readonly fixture = inputOtpFixture;
}
export default InputOTPDemoComponent;

<script lang="ts">
  const inputOtpFixture = {
    id: "inputotp",
    length: 6,
    // Four of six boxes filled, so every adapter's demo shows the same
    // half-filled state: the filled prefix, two empty boxes, and the caret
    // position the paste/backspace helpers key off.
    otpValue: "4821",
    label: "One-time code",
  } satisfies {
    id: string;
    length: number;
    otpValue: string;
    label: string;
  };
 
  import { InputOTP } from "@grassroot/ui-svelte";
</script>
 
<div>
  <InputOTP
    length={inputOtpFixture.length}
    defaultValue={inputOtpFixture.otpValue}
    label={inputOtpFixture.label}
  />
</div>

/** @jsxImportSource solid-js */
const inputOtpFixture = {
  id: "inputotp",
  length: 6,
  // Four of six boxes filled, so every adapter's demo shows the same
  // half-filled state: the filled prefix, two empty boxes, and the caret
  // position the paste/backspace helpers key off.
  otpValue: "4821",
  label: "One-time code",
} satisfies {
  id: string;
  length: number;
  otpValue: string;
  label: string;
};
 
import { InputOTP } from "@grassroot/ui-solid";
export default function InputOTPDemo() {
  return (
    <div>
      <InputOTP
        length={inputOtpFixture.length}
        defaultValue={inputOtpFixture.otpValue}
        label={inputOtpFixture.label}
      />
    </div>
  );
}