@base-ui-components/react
Version:
Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.
108 lines (107 loc) • 4.1 kB
TypeScript
import * as React from 'react';
import type { ScrubHandle } from './useScrub.types.js';
export declare function useNumberFieldRoot(params: UseNumberFieldRoot.Parameters): UseNumberFieldRoot.ReturnValue;
export declare namespace UseNumberFieldRoot {
interface Parameters {
/**
* The id of the input element.
*/
id?: string;
/**
* The minimum value of the input element.
*/
min?: number;
/**
* The maximum value of the input element.
*/
max?: number;
/**
* The small step value of the input element when incrementing while the meta key is held. Snaps
* to multiples of this value.
* @default 0.1
*/
smallStep?: number;
/**
* Amount to increment and decrement with the buttons and arrow keys,
* or to scrub with pointer movement in the scrub area.
* @default 1;
*/
step?: number;
/**
* The large step value of the input element when incrementing while the shift key is held. Snaps
* to multiples of this value.
* @default 10
*/
largeStep?: number;
/**
* Whether the user must enter a value before submitting a form.
* @default false
*/
required?: boolean;
/**
* Whether the component should ignore user interaction.
* @default false
*/
disabled?: boolean;
/**
* Whether the field is forcefully marked as invalid.
* @default false
*/
invalid?: boolean;
/**
* Whether to focus the element on page load.
* @default false
*/
autoFocus?: boolean;
/**
* Whether the user should be unable to change the field value.
* @default false
*/
readOnly?: boolean;
/**
* Identifies the field when a form is submitted.
*/
name?: string;
/**
* The raw numeric value of the field.
*/
value?: number | null;
/**
* The uncontrolled value of the field when it’s initially rendered.
*
* To render a controlled number field, use the `value` prop instead.
*/
defaultValue?: number;
/**
* Whether to allow the user to scrub the input value with the mouse wheel while focused and
* hovering over the input.
* @default false
*/
allowWheelScrub?: boolean;
/**
* Options to format the input value.
*/
format?: Intl.NumberFormatOptions;
/**
* Callback fired when the number value changes.
* @param {number | null} value The new value.
* @param {Event} event The event that triggered the change.
*/
onValueChange?: (value: number | null, event?: Event) => void;
}
interface ReturnValue {
getGroupProps: (externalProps?: React.ComponentPropsWithRef<'div'>) => React.ComponentPropsWithRef<'div'>;
getInputProps: (externalProps?: React.ComponentPropsWithRef<'input'>) => React.ComponentPropsWithRef<'input'>;
getIncrementButtonProps: (externalProps?: React.ComponentPropsWithRef<'button'>) => React.ComponentPropsWithRef<'button'>;
getDecrementButtonProps: (externalProps?: React.ComponentPropsWithRef<'button'>) => React.ComponentPropsWithRef<'button'>;
getScrubAreaProps: (externalProps?: React.ComponentPropsWithRef<'span'>) => React.ComponentPropsWithRef<'span'>;
getScrubAreaCursorProps: (externalProps?: React.ComponentPropsWithRef<'span'>) => React.ComponentPropsWithRef<'span'>;
inputValue: string;
value: number | null;
isScrubbing: boolean;
inputRef: ((instance: HTMLInputElement | null) => void) | null;
scrubHandleRef: React.RefObject<ScrubHandle | null>;
scrubAreaRef: React.RefObject<HTMLSpanElement | null>;
scrubAreaCursorRef: React.RefObject<HTMLSpanElement | null>;
}
}