Number Input

<link
  rel="component"
  href="@threadlabs/looma/components/ui-number-input/ui-number-input.html"
>

<ui-number-input
  label="Frodo’s desk spacing"
  value="16px"
  unit="px"
  min="8"
  max="40"
  step="1"
></ui-number-input>

<script setup>
  import { UiNumberInput } from "@threadlabs/looma";
</script>

<template>
  <UiNumberInput
    label="Frodo’s desk spacing"
    value="16px"
    unit="px"
    :min="8"
    :max="40"
    :step="1"
  />
</template>

import { UiNumberInput } from "@threadlabs/looma";

export default function Example() {
  return <UiNumberInput
    label="Frodo’s desk spacing"
    value="16px"
    unit="px"
    min={8}
    max={40}
    step={1}
  />;
}

/** @jsxImportSource preact */
import { UiNumberInput } from "@threadlabs/looma";

export default function Example() {
  return <UiNumberInput
    label="Frodo’s desk spacing"
    value="16px"
    unit="px"
    min={8}
    max={40}
    step={1}
  />;
}

<script>
  import { UiNumberInput } from "@threadlabs/looma";
</script>

<UiNumberInput
  label="Frodo’s desk spacing"
  value="16px"
  unit="px"
  min={8}
  max={40}
  step={1}
/>

import { Component } from "@angular/core";
import { UiNumberInput } from "@threadlabs/looma";

@Component({
  selector: "example-view",
  standalone: true,
  imports: [UiNumberInput],
  template: `
    <span
      ui-number-input
      [label]="'Frodo’s desk spacing'"
      [value]="'16px'"
      [unit]="'px'"
      [min]="8"
      [max]="40"
      [step]="1"
    ></span>
  `,
})
export default class Example {}