Name	Description	Default
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue
propertyName*	This is a short description summary	defaultValue

NumberInput

A number input is used to let the user enter a numeric value.

usage: import { NumberInput } from "@sharegate/orbit-ui";
sources: Github

Usage

Default

A default number input.

Editable example

<NumberInput placeholder="Age" /><NumberInput placeholder="Age" />

Value

A number input can have a value.

Editable example

<Inline>
    <NumberInput defaultValue={18} placeholder="Age" />
    <NumberInput defaultValue={155.75} step={0.1} placeholder="Weight" />
</Inline><Inline>
    <NumberInput defaultValue={18} placeholder="Age" />
    <NumberInput defaultValue={155.75} step={0.1} placeholder="Weight" />
</Inline>

Min / Max

A number input value can be forced between min & max boundaries.

Editable example

<NumberInput min={15} max={30} defaultValue={18} placeholder="Age" /><NumberInput min={15} max={30} defaultValue={18} placeholder="Age" />

Icon

A number input can have an icon.

Editable example

<NumberInput icon={<PencilMajorIcon />} placeholder="Age" /><NumberInput icon={<PencilMajorIcon />} placeholder="Age" />

Disabled

A number input can be disabled.

Editable example

<NumberInput disabled placeholder="Age" /><NumberInput disabled placeholder="Age" />

Readonly

A number input can be readonly.

Editable example

<NumberInput readOnly defaultValue={18} placeholder="Age" /><NumberInput readOnly defaultValue={18} placeholder="Age" />

Loading

A number input can show that it is currently loading data.

Editable example

<NumberInput loading placeholder="Age" /><NumberInput loading placeholder="Age" />

Fluid

A number input can take the width of its container.

Editable example

<NumberInput fluid placeholder="Age" /><NumberInput fluid placeholder="Age" />

Validation

A number input can display a validation state to communicate to the user whether the current value is valid or invalid. Implement your own validation logic in your app and pass either "valid" or "invalid" to the input via the validationState prop.

The example below illustrates how one would validate a required age value.

Editable example

() => {
    const [value, setValue] = useState(18);

    const handleValueChange = useCallback(
        (event, newValue) => {
            setValue(newValue);
            console.log(newValue);
        },
        [setValue]
    );

    const handleClearClick = useCallback(() => {
        setValue(null);
    }, [setValue]);

    const isValid = useMemo(() => !isNil(value), [value]);

    return (
        <Inline alignY="center">
            <NumberInput
                validationState={isValid ? "valid" : "invalid"}
                value={value}
                min={1}
                placeholder="Age"
                onValueChange={handleValueChange}
            />
            <Button variant="tertiary" onClick={handleClearClick}>
                Clear
            </Button>
        </Inline>
    );
};() => {
    const [value, setValue] = useState(18);

    const handleValueChange = useCallback(
        (event, newValue) => {
            setValue(newValue);
            console.log(newValue);
        },
        [setValue]
    );

    const handleClearClick = useCallback(() => {
        setValue(null);
    }, [setValue]);

    const isValid = useMemo(() => !isNil(value), [value]);

    return (
        <Inline alignY="center">
            <NumberInput
                validationState={isValid ? "valid" : "invalid"}
                value={value}
                min={1}
                placeholder="Age"
                onValueChange={handleValueChange}
            />
            <Button variant="tertiary" onClick={handleClearClick}>
                Clear
            </Button>
        </Inline>
    );
};

Controlled

A number input value can be handled in controlled mode.

Editable example

() => {
    const [value, setValue] = useState(null);

    const handleValueChange = useCallback(
        (event, newValue) => {
            setValue(newValue);
            console.log(newValue);
        },
        [setValue]
    );

    return <NumberInput value={value} onValueChange={handleValueChange} placeholder="Where to?" />
};() => {
    const [value, setValue] = useState(null);

    const handleValueChange = useCallback(
        (event, newValue) => {
            setValue(newValue);
            console.log(newValue);
        },
        [setValue]
    );

    return <NumberInput value={value} onValueChange={handleValueChange} placeholder="Where to?" />
};

API

NumberInput

usage: import { NumberInput } from "@sharegate/orbit-ui";
extends: Input
StyleProps

Name Description Default

autoFocus

Whether or not the input should autoFocus on render.

numberfalsetrue

defaultValue

The default value of value when uncontrolled.

number

fluid

Whether or not the input take up the width of its container.

false | true | ResponsiveValue<boolean>

icon

Icon component rendered before the value.

ReactElement<any, string | JSXElementConstructor<any>>

Whether or not to render a loader.

falsetrue

max

The maximum value of the input.

number

min

The minimum value of the input.

number

onValueChange

Called when the input value change.

(event: SyntheticEvent<Element, Event>, value: number) => void

`event`	React's original event.
`value`	The new value.

step

The step used to increment or decrement the value.

number

validationState

Whether or not the input should display as "valid" or "invalid".

"valid""invalid"

value

A controlled value.

number

wrapperProps

Additional props to render on the wrapper element.

Partial<OmitInternalProps<InnerBoxProps, never> & RefAttributes<any>>

No Preview

NumberInput

Usage

Default

Value

Min / Max

Icon

Disabled

Readonly

Loading

Fluid

Validation

Controlled

API

NumberInput