NumberInput

import { FormField, NumberInput } from '@bindshq/stance-react';

export function Basic() {
  return (
    <div style={{ width: '100%', maxWidth: 240 }}>
      <FormField label="Licence seats" description="Between 1 and 500.">
        <NumberInput defaultValue={25} min={1} max={500} />
      </FormField>
    </div>
  );
}

import { FormField, NumberInput } from '@bindshq/stance-react';

export function Decimal() {
  const gbp = new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP' });
  return (
    <div style={{ width: '100%', maxWidth: 240 }}>
      <FormField label="Price per seat">
        <NumberInput defaultValue={4.5} min={0} step={0.5} format={(v) => gbp.format(v)} />
      </FormField>
    </div>
  );
}

import { FormField, NumberInput } from '@bindshq/stance-react';

export function WithAffixes() {
  return (
    <div style={{ width: '100%', maxWidth: 240 }}>
      <FormField label="Send reminders every">
        <NumberInput defaultValue={3} min={1} max={30} suffix="days" />
      </FormField>
    </div>
  );
}

import { FormField, NumberInput } from '@bindshq/stance-react';

export function NoStepper() {
  return (
    <div style={{ width: '100%', maxWidth: 240 }}>
      <FormField label="Contract value">
        <NumberInput hideStepper prefix="£" defaultValue={12000} step={100} />
      </FormField>
    </div>
  );
}