InputOTP

import { InputOTP } from "@grassroot/ui-react";
 
const [code, setCode] = React.useState("4821");
 
<InputOTP length={6} value={code} onChange={setCode} />

<script setup lang="ts">
import { ref } from "vue";
import { InputOTP } from "@grassroot/ui-vue";
 
const code = ref("4821");
</script>
 
<template>
  <InputOTP v-model="code" :length="6" @change="code = $event" />
</template>

import { Component, signal } from "@angular/core";
import { GrassrootInputOTP } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootInputOTP],
  template: `
    <grassroot-input-otp [length]="6" [value]="code()" (change)="code.set($event)" />
  `,
})
export class ExampleComponent {
  readonly code = signal("4821");
}

<script lang="ts">
  import { InputOTP } from "@grassroot/ui-svelte";
 
  let code = $state("4821");
</script>
 
<InputOTP length={6} value={code} onChange={(next) => (code = next)} />

import { createSignal } from "solid-js";
import { InputOTP } from "@grassroot/ui-solid";
 
export function Example() {
  const [code, setCode] = createSignal("4821");
 
  return (
    <>
      <InputOTP length={6} value={code()} onChange={setCode} />
    </>
  );
}