InputNumber
InputNumber is an input field for numbers.
Usage
import { InputNumber } from 'stwui';
import InputNumber from 'stwui/input-number';
<script lang="ts">
import { InputNumber } from 'stwui';
</script>
<InputNumber name="input" placeholder="Basic" />
<script lang="ts">
import { InputNumber } from 'stwui';
</script>
<InputNumber name="input">
<InputNumber.Label slot="label">Label</InputNumber.Label>
</InputNumber>
With Leading
<script lang="ts">
import { InputNumber } from 'stwui';
const email = "svg-path";
</script>
<InputNumber name="input" allowClear>
<InputNumber.Label slot="label">Label</InputNumber.Label>
<InputNumber.Leading slot="leading" data={email} />
</InputNumber>
With Trailing
<script lang="ts">
import { InputNumber } from 'stwui';
const phone = "svg-path";
</script>
<InputNumber name="input" allowClear>
<InputNumber.Label slot="label">Label</InputNumber.Label>
<InputNumber.Trailing slot="trailing" data={phone} />
</InputNumber>
<script lang="ts">
import { InputNumber } from 'stwui';
const email = "svg-path";
const phone = "svg-path";
</script>
<InputNumber
name="input"
bind:value
{error}
handleLeadingClick={() => console.log('clicking leading')}
>
<InputNumber.Label slot="label">Label</InputNumber.Label>
<InputNumber.Leading slot="leading" data={email} />
<InputNumber.Trailing slot="trailing" data={phone} />
</InputNumber>
<script lang="ts">
import { InputNumber } from 'stwui';
</script>
<InputNumber name="input" disabled>
<InputNumber.Label slot="label">Label</InputNumber.Label>
<InputNumber.Leading slot="leading" data={email} />
</InputNumber>
With showSpin
<script lang="ts">
import { InputNumber } from 'stwui';
</script>
<InputNumber name="input" allowClear showSpin>
<InputNumber.Label slot="label">Label</InputNumber.Label>
<InputNumber.Leading slot="leading" data={email} />
</InputNumber>
With min (1)
<script lang="ts">
import { InputNumber } from 'stwui';
</script>
<InputNumber name="input" min="1" showSpin>
<InputNumber.Label slot="label">Label</InputNumber.Label>
<InputNumber.Leading slot="leading" data={email} />
</InputNumber>
With max (10)
<script lang="ts">
import { InputNumber } from 'stwui';
</script>
<InputNumber name="input" max="10" showSpin>
<InputNumber.Label slot="label">Label</InputNumber.Label>
<InputNumber.Leading slot="leading" data={email} />
</InputNumber>
With min (0) & max (10)
<script lang="ts">
import { InputNumber } from 'stwui';
</script>
<InputNumber name="input-3" min="0" max="10" showSpin>
<InputNumber.Label slot="label">Label</InputNumber.Label>
<InputNumber.Leading slot="leading" data={email} />
</InputNumber>
InputNumber Props
| name | string | nanoid() |
| error | string | undefined | |
| placholder | string | undefined | |
| value | string | undefined | |
| autocomplete | 'on' | 'off' | undefined | |
| autocapitalize | 'off' | 'none' | 'sentences' | 'words' | 'characters' | off |
| readonly | boolean | |
| disabled | boolean | false |
| step | number | 1 |
| showSpin | boolean | false |
InputNumber Slots
| label | <InputNumber.Label slot="label" /> |
| leading | <InputNumber.Leading slot="leading" /> |
| trailing | <InputNumber.Trailing slot="trailing" /> |
InputNumber.Leading Props
| data | string (IconData) | |
| viewBox | string | 0 0 24 24 |
| size | string | 24px |
| width | string | 24px |
| height | string | 24px |
| color | string | currentColor |
| stroke | string | undefined | |
| fill | string | currentColor |
InputNumber.Trailing Props
| data | string (IconData) | |
| viewBox | string | 0 0 24 24 |
| size | string | 24px |
| width | string | 24px |
| height | string | 24px |
| color | string | currentColor |
| stroke | string | undefined | |
| fill | string | currentColor |
InputNumber Class Identifiers
| stwui-input-number-wrapper |
| stwui-input-number-label |
| stwui-input-number-input |
| stwui-input-number-leading-wrapper |
| stwui-input-number-clear-wrapper |
| stwui-input-number-spin-wrapper |
| stwui-input-number-trailing-wrapper |
| stwui-input-number-error-icon |
| stwui-input-number-error |
