QuantityStepper

import { QuantityStepper } from "@grassroot/ui-react";
 
const [qty, setQty] = React.useState(2);
 
<QuantityStepper value={qty} onChange={setQty} min={1} max={9} label="Quantity" />

<script setup lang="ts">
import { ref } from "vue";
import { QuantityStepper } from "@grassroot/ui-vue";
 
const qty = ref(2);
</script>
 
<template>
  <QuantityStepper
    v-model="qty"
    @change="qty = $event"
    :min="1"
    :max="9"
    label="Quantity"
  />
</template>

import { Component, signal } from "@angular/core";
import { GrassrootQuantityStepper } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootQuantityStepper],
  template: `
    <grassroot-quantity-stepper
      [value]="qty()"
      (change)="qty.set($event)"
      [min]="1"
      [max]="9"
      label="Quantity"
    />
  `,
})
export class ExampleComponent {
  readonly qty = signal(2);
}

<script lang="ts">
  import { QuantityStepper } from "@grassroot/ui-svelte";
 
  let qty = $state(2);
</script>
 
<QuantityStepper
  value={qty}
  onChange={(next) => (qty = next)}
  min={1}
  max={9}
  label="Quantity"
/>

import { createSignal } from "solid-js";
import { QuantityStepper } from "@grassroot/ui-solid";
 
export function Example() {
  const [qty, setQty] = createSignal(2);
 
  return (
    <>
      <QuantityStepper value={qty()} onChange={setQty} min={1} max={9} label="Quantity" />
    </>
  );
}