Number Field

A numeric input element with increment and decrement buttons, and a scrub area.

Instances

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

Number Field Parts

import {
  NumberField,
  NumberFieldScrubArea,
  NumberFieldScrubAreaCursor,
  NumberFieldGroupVariants,
  NumberFieldGroup,
  NumberFieldDecrement,
  NumberFieldIncrement,
  NumberFieldInput
} from "components/selia/number-field";

Structure

The expected structure and composition of the component.

Anatomy

<Field>
  <NumberField defaultValue={1} min={1} max={1000}>
    <NumberFieldScrubArea>
      <FieldLabel>Instances</FieldLabel>
    </NumberFieldScrubArea>
    <NumberFieldGroup>
      <NumberFieldDecrement>
        <MinusIcon />
      </NumberFieldDecrement>
      <NumberFieldInput />
      <NumberFieldIncrement>
        <PlusIcon />
      </NumberFieldIncrement>
    </NumberFieldGroup>
  </NumberField>
</Field>

Props

Each component part, its responsibility, and the props it exposes.

<NumberFieldGroup>

The group of number field components.

Base behavior is provided by Base UI Number Field. Refer to its documentation for the full API.

Name

Default

Options

`variant`

`default`

`default``plain`