Spin button

API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. ? means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

SpinButton API

interface SpinButtonProps {
  /**
   * Controls the colors and borders of the input.
   * @default 'filled-darker'
   */
  appearance?: "outline" | "filled-darker" | "filled-lighter" | "underline";

  as?: "input";

  children?: undefined;

  className?: string;

  /**
   * Renders the decrement control.
   */
  decrementButton?: NonNullable<WithSlotShorthandValue<{ as?: "button"; } & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & { ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null; }, "children"> & { children?: any; }> | null> | undefined;

  /**
   * Initial value of the control (assumed to be valid). Updates to this prop will not be respected.
   *
   * Use this if you intend for the SpinButton to be an uncontrolled component which maintains its
   * own value. For a controlled component, use `value` instead. (Mutually exclusive with `value`.)
   *
   * Use `null` to indicate the control has no value.
   */
  defaultValue?: number | null;

  /**
   * String representation of `value`.
   *
   * Use this when displaying the value to users as something other than a plain number.
   * For example, when displaying currency values this might be "$1.00" when value is `1`.
   *
   * Only provide this if the SpinButton is a controlled component where you are maintaining its
   * current state and passing updates based on change events. When SpinButton is used as an
   * uncontrolled component this prop is ignored.
   */
  displayValue?: string;

  /**
   * Renders the increment control.
   */
  incrementButton?: NonNullable<WithSlotShorthandValue<{ as?: "button"; } & Omit<Omit<DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & { ref?: ((instance: HTMLButtonElement | null) => void) | RefObject<HTMLButtonElement> | null; }, "children"> & { children?: any; }> | null> | undefined;

  /**
   * Input that displays the current value and accepts direct input from the user.
   * Displayed value is formatted.
   *
   * This is the primary slot.
   */
  input?: ({ as?: "input"; } & Omit<Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & { ref?: ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null; }, "children"> & { children?: undefined; }) | undefined;

  /**
   * Max value of the control. If not provided, the control has no maximum value.
   */
  max?: number;

  /**
   * Min value of the control. If not provided, the control has no minimum value.
   */
  min?: number;

  /**
   * Callback for when the committed value changes.
   * - User presses the up/down buttons (on single press or every spin)
   * - User presses the up/down arrow keys (on single press or every spin)
   * - User *commits* edits to the input text by focusing away (blurring) or pressing enter.
   *   Note that this is NOT called for every key press while the user is editing.
   */
  onChange?: ((event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => void);

  /**
   * How many decimal places the value should be rounded to.
   *
   * The default is calculated based on the precision of `step`: i.e. if step = 1, precision = 0.
   * step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2.
   */
  precision?: number;

  ref?: Ref<HTMLInputElement>;

  /**
   * The root element of SpinButton is a container `<div>`.
   * The root slot receives the `className` and `style` specified on the `<SpinButton>`.
   * All other native props are applied to the primary slot: `input`.
   */
  root?: NonNullable<WithSlotShorthandValue<{ as?: "span"; } & Omit<Omit<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & { ref?: ((instance: HTMLSpanElement | null) => void) | RefObject<HTMLSpanElement> | null; }, "children"> & { children?: any; }> | null> | undefined;

  /**
   * Size of the input.
   * @default 'medium'
   */
  size?: "small" | "medium";

  /**
   * Difference between two adjacent values of the control.
   * This value is used to calculate the precision of the input if no `precision` is given.
   * The precision calculated this way will always be greater than or equal 0.
   * @default 1
   */
  step?: number;

  /**
   * Large difference between two values. This should be greater than `step` and is used
   * when users hit the Page Up or Page Down keys.
   * @default 1
   */
  stepPage?: number;

  style?: CSSProperties;

  /**
   * Current value of the control (assumed to be valid).
   *
   * Only provide this if the SpinButton is a controlled component where you are maintaining its
   * current state and passing updates based on change events; otherwise, use the `defaultValue`
   * property.
   *
   * Use `null` to indicate the control has no value.
   *
   * Mutually exclusive with `defaultValue`.
   */
  value?: number | null;
}