Number Field

Usage

numberField.tsx

import { NumberField, NumberFieldState } from "@uj-vilag/dap-components";
import { useState } from "react";

export default function NumberFieldExample() {
  const [value, setValue] = useState<NumberFieldState>(0);

  return (
    <div>
      <NumberField value={value} onValueChange={setValue} className="w-60" />
    </div>
  );
}

This component only supports controlled usage. Use NumberFieldState to type the state correctly.

Props

This component renders a <input type="number"> element, so all native input props are supported.

Prop

Type

Examples

Sizes

numberField-sizes.tsx

import { NumberField } from "@uj-vilag/dap-components";

export default function NumberFieldSizesExample() {
  return (
    <div className="flex flex-col gap-8">
      <NumberField size="large" className="w-60" />
      <NumberField size="small" className="w-60" />
      <NumberField size="xSmall" className="w-60" />
    </div>
  );
}

Status

numberField-statuses.tsx

import { NumberField } from "@uj-vilag/dap-components";

export default function NumberFieldStatusesExample() {
  return (
    <div className="flex flex-col gap-8">
      <NumberField status="error" className="w-60" />
      <NumberField status="success" className="w-60" />
    </div>
  );
}

Disabled & Readonly

numberField-disabled-readonly.tsx

import { NumberField } from "@uj-vilag/dap-components";

export default function NumberFieldDisabledReadonlyExample() {
  return (
    <div className="flex flex-col gap-8">
      <NumberField disabled className="w-60" />
      <NumberField readOnly className="w-60" />
    </div>
  );
}

With Label & Feedback

Age

Please enter your age.

Please enter a valid age.

Quantity

Enter the quantity you wish to order.

Quantity is available in stock!

numberField-with-label-feedback.tsx

import { NumberField, Label, Feedback } from "@uj-vilag/dap-components";

export default function NumberFieldWithLabelFeedbackExample() {
  return (
    <div className="flex flex-col gap-8">
      <Label
        labelText="Age"
        requirement="required"
        htmlFor="age-input"
        helperText="Please enter your age."
      >
        <NumberField
          required
          status="error"
          aria-describedby="age-feedback age-input-helperText"
        />
        <Feedback message="Please enter a valid age." id="age-feedback" />
      </Label>
      <Label
        labelText="Quantity"
        requirement="required"
        htmlFor="quantity-input"
        helperText="Enter the quantity you wish to order."
      >
        <NumberField
          required
          status="success"
          aria-describedby="quantity-feedback quantity-input-helperText"
        />
        <Feedback
          message="Quantity is available in stock!"
          variant="positive"
          id="quantity-feedback"
        />
      </Label>
    </div>
  );
}