View on GitHub

Number Input

A number input allows user to input custom numerical entries with a keyboard.

Usage

Import the Input component from “figblocks”.

<script>
	import { NumberInput } from 'figblocks';
</script>

<NumberInput value="42" />

Min, Max, Step

The min , max , and step props define the minimum value, maximum value, and the increment step for the input, respectively. This allows users to input numerical values within a specified range.

<script>
	import { NumberInput, Label } from 'figblocks';
</script>

<div>
	<Label for="xpos">Position</Label>
	<NumberInput min={10} max={100} step={10} id="xpos" placeholder="Enter the x position" />
</div>

Borders

The border prop forces border on the input field.

<NumberInput value="13" />
<NumberInput border value="69" />

Disabled state

The input can be disabled by passing the disabled prop.

<NumberInput disabled value={42} />

Invalid state

The input state can be set to invalid by passing the invalid prop. Furthermore, the error message can be passed using the errorMessage prop.

The answer to life, the universe...
<NumberInput invalid value={42} errorMessage="The answer to life, the universe..." />

Input with icon

Input accepts iconSvg & iconText props to display icons. Refer Icon component for further detail.

<script>
	import { NumberInput, Icon } from 'figblocks';
	import { IconCode } from 'figblocks/icons';
</script>

<NumberInput iconSvg={IconCode} placeholder="Enter the value here" />

Props

id string undefined Id of the input.
name string undefined The name of the input element, used when submitting a form.
value string undefined The value of the input.
min number | string undefined Minimum value for the input.
max number | string undefined Maximum value for the input.
step number | string undefined Increment step for the input.
border boolean false Forces border on the input.
disabled boolean false If true, the input will be disabled.
iconSvg string undefined Refer Icon component.
iconText string undefined Refer Icon component.
spin boolean false Refer Icon component.
invalid boolean false If true, the input will be set to invalid state.
errorMessage string undefined Error message for the invalid state.
placeholder string undefined Placeholder text.
class string undefined Custom CSS classname for styling.

Events