Number Input
Numeric input field with increment and decrement controls.
Default
Show code Hide code
import { NumberInput } from '@mylighthouse/prism-react';
export default function NumberInputDefault(): React.JSX.Element {
return (
<NumberInput defaultValue={7} id="number-input-default" max={30} min={1} />
);
}Validation states
Show code Hide code
import { NumberInput } from '@mylighthouse/prism-react';
export default function NumberInputStates(): React.JSX.Element {
return (
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
<NumberInput defaultValue={0} hasError id="number-input-error" />
<NumberInput defaultValue={20} hasWarning id="number-input-warning" />
</div>
);
}Size
Show code Hide code
import { NumberInput } from '@mylighthouse/prism-react';
export default function NumberInputSize(): React.JSX.Element {
return (
<div style={{ display: 'flex', gap: '16px', alignItems: 'flex-start' }}>
<NumberInput defaultValue={5} id="number-input-default-size" />
<NumberInput defaultValue={5} id="number-input-small" isSmall />
</div>
);
}Disabled and read-only
Show code Hide code
import { NumberInput } from '@mylighthouse/prism-react';
export default function NumberInputDisabled(): React.JSX.Element {
return (
<div style={{ display: 'flex', gap: '16px' }}>
<NumberInput defaultValue={10} disabled id="number-input-disabled" />
<NumberInput defaultValue={10} id="number-input-readonly" readOnly />
</div>
);
}| Name | Default | Type | Description |
|---|---|---|---|
className | -- | string | -- |
defaultValue | -- | number | -- |
disabled | -- | boolean | -- |
format | -- | NumberFormatOptions | -- |
hasError | -- | boolean | -- |
hasWarning | -- | boolean | -- |
id | -- | string | -- |
isSmall | -- | boolean | -- |
max | -- | number | -- |
min | -- | number | -- |
name | -- | string | -- |
onValueChange | -- | (value: number) => void | -- |
placeholder | -- | string | -- |
readOnly | -- | boolean | -- |
required | -- | boolean | -- |
step | -- | number | -- |
value | -- | number | -- |