NumberInput

View Source

NOTE: Introduced feature in v0.4.14.

IMPORTANT: This feature only runs on Javascript-enabled clients, you NEED to ALWAYS validate user input on the server.

NumberInput is a subset of NumberInput, which only accepts numbers and masks user input accordingly.

<script>
    import {NumberInput} from "@kahi-ui/framework";

    let value = 42;
</script>

<NumberInput bind:value />

Imports

<script>
    import {NumberInput} from "@kahi-ui/framework";
</script>

Maximum + Minimum

NOTE: Introduced feature in v0.6.0.

You can have the NumberInput use disallow typing in numbers not within the range of the max and min properties.

<script>
    import {NumberInput} from "@kahi-ui/framework";

    let value = 42;
</script>

<NumberInput max={84} min={-84} bind:value />

Palette

You can change the color palette of the NumberInput via the palette property.

<script>
    import {
        NumberInput,
        Stack,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    orientation="horizontal"
    alignment_y="top"
    spacing="medium"
    variation="wrap"
>
    <NumberInput
        span_x="20"
        placeholder="This is a DEFAULT NumberInput"
    />

    <NumberInput
        palette="accent"
        span_x="20"
        placeholder="This is a ACCENT NumberInput"
    />

    <NumberInput
        palette="neutral"
        span_x="20"
        placeholder="This is a NEUTRAL NumberInput"
    />

    <NumberInput
        palette="dark"
        span_x="20"
        placeholder="This is a DARK NumberInput"
    />

    <NumberInput
        palette="light"
        span_x="20"
        placeholder="This is a LIGHT NumberInput"
    />

    <NumberInput
        palette="alert"
        span_x="20"
        placeholder="This is a ALERT NumberInput"
    />

    <NumberInput
        palette="affirmative"
        span_x="20"
        placeholder="This is a AFFIRMATIVE NumberInput"
    />

    <NumberInput
        palette="informative"
        span_x="20"
        placeholder="This is a INFORMATIVE NumberInput"
    />

    <NumberInput
        palette="negative"
        span_x="20"
        placeholder="This is a NEGATIVE NumberInput"
    />
</Stack.Container>

Block

You can alter the NumberInput render as an opaque block via the variation property.

<script>
    import {
        NumberInput,
        Stack,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    orientation="horizontal"
    alignment_y="top"
    spacing="medium"
    variation="wrap"
>
    <NumberInput
        variation="block"
        span_x="20"
        placeholder="This is a DEFAULT NumberInput"
    />

    <NumberInput
        variation="block"
        palette="accent"
        span_x="20"
        placeholder="This is a ACCENT NumberInput"
    />

    <NumberInput
        variation="block"
        palette="dark"
        span_x="20"
        placeholder="This is a DARK NumberInput"
    />

    <NumberInput
        variation="block"
        palette="light"
        span_x="20"
        placeholder="This is a LIGHT NumberInput"
    />

    <NumberInput
        variation="block"
        palette="alert"
        span_x="20"
        placeholder="This is a ALERT NumberInput"
    />

    <NumberInput
        variation="block"
        palette="affirmative"
        span_x="20"
        placeholder="This is a AFFIRMATIVE NumberInput"
    />

    <NumberInput
        variation="block"
        palette="negative"
        span_x="20"
        placeholder="This is a NEGATIVE NumberInput"
    />
</Stack.Container>

Flush

You can change the appearance of the NumberInput to be flush with the rest of the Application content via the variation property.

<script>
    import {NumberInput} from "@kahi-ui/framework";
</script>

Input some text:
<NumberInput
    variation="flush"
    span_x="20"
    placeholder="This is a FLUSH NumberInput"
/>

Sizing

WARNING: This feature was renamed from size to sizing in v0.6.0.

NOTE: By passing an array, you can set responsive values. e.g. sizing={["tiny", "tablet:medium", "mobile:medium"]}

You can change the size of the NumberInput via the sizing property.

<script>
    import {
        NumberInput,
        Stack,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    orientation="horizontal"
    alignment_y="top"
    spacing="medium"
    variation="wrap"
>
    <NumberInput
        span_x="20"
        placeholder="This is a DEFAULT NumberInput"
    />

    <NumberInput
        sizing="nano"
        span_x="20"
        placeholder="This is a NANO NumberInput"
    />

    <NumberInput
        sizing="tiny"
        span_x="20"
        placeholder="This is a TINY NumberInput"
    />

    <NumberInput
        sizing="small"
        span_x="20"
        placeholder="This is a SMALL NumberInput"
    />

    <NumberInput
        sizing="medium"
        span_x="20"
        placeholder="This is a MEDIUM NumberInput"
    />

    <NumberInput
        sizing="large"
        span_x="20"
        placeholder="This is a LARGE NumberInput"
    />

    <NumberInput
        sizing="huge"
        span_x="20"
        placeholder="This is a HUGE NumberInput"
    />

    <NumberInput
        sizing="massive"
        span_x="20"
        placeholder="This is a MASSIVE NumberInput"
    />
</Stack.Container>

Radius

NOTE: Introduced feature in v0.6.0.

NOTE: By passing an array, you can set responsive values. e.g. radius={["tiny", "tablet:medium", "mobile:medium"]}

You can change the border radius of the NumberInput via the radius property.

<script>
    import {
        NumberInput,
        Stack,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    orientation="horizontal"
    alignment_y="top"
    spacing="medium"
    variation="wrap"
>
    <NumberInput
        span_x="20"
        placeholder="This is a DEFAULT NumberInput"
    />

    <NumberInput
        radius="none"
        span_x="20"
        placeholder="This is a NONE NumberInput"
    />

    <NumberInput
        radius="nano"
        span_x="20"
        placeholder="This is a NANO NumberInput"
    />

    <NumberInput
        radius="tiny"
        span_x="20"
        placeholder="This is a TINY NumberInput"
    />

    <NumberInput
        radius="small"
        span_x="20"
        placeholder="This is a SMALL NumberInput"
    />

    <NumberInput
        sizing="medium"
        span_x="20"
        placeholder="This is a MEDIUM NumberInput"
    />

    <NumberInput
        radius="large"
        span_x="20"
        placeholder="This is a LARGE NumberInput"
    />

    <NumberInput
        radius="huge"
        span_x="20"
        placeholder="This is a HUGE NumberInput"
    />

    <NumberInput
        radius="massive"
        span_x="20"
        placeholder="This is a MASSIVE NumberInput"
    />
</Stack.Container>

Shapes

NOTE: Introduced feature in v0.6.0.

NOTE: By passing an array, you can set responsive values. e.g. shape={["circle", "tablet:pill", "mobile:pill"]}

You can change the shape of the NumberInput via the shape property.

<script>
    import {
        NumberInput,
        Stack,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    orientation="horizontal"
    alignment_y="top"
    spacing="medium"
    variation="wrap"
>
    <NumberInput
        span_x="20"
        placeholder="This is a DEFAULT NumberInput"
    />

    <NumberInput
        shape="circle"
        span_x="20"
        placeholder="This is a CIRCLE NumberInput"
    />

    <NumberInput
        shape="pill"
        span_x="20"
        placeholder="This is a PILL NumberInput"
    />
</Stack.Container>

Alignment

WARNING: This feature was renamed from align to alignment_x in v0.6.0.

You can alter the alignment of the Component via the alignment_x property.

<script>
    import {
        NumberInput,
        Stack,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <NumberInput
        placeholder="DEFAULT NumberInput"
        span_x="20"
    />

    <NumberInput
        alignment_x="left"
        placeholder="LEFT NumberInput"
        span_x="20"
    />

    <NumberInput
        alignment_x="center"
        placeholder="CENTER NumberInput"
        span_x="20"
    />

    <NumberInput
        alignment_x="right"
        placeholder="RIGHT NumberInput"
        span_x="20"
    />

    <NumberInput
        alignment_x="justify"
        placeholder="JUSTIFY NumberInput"
        span_x="20"
    />
</Stack.Container>

Placeholder

You can set the NumberInput to show placeholder text whenever there is no current value.

<script>
    import {NumberInput} from "@kahi-ui/framework";
</script>

<NumberInput placeholder="...enter a number" />

Span X

WARNING: This feature was renamed from characters to span_x in v0.6.0.

You can set how wide your NumberInput to an approximation of character width via the span_x property.

<script>
    import {NumberInput} from "@kahi-ui/framework";
</script>

<NumberInput span_x="2" />

Properties

NumberInput

Name Description Types
palette Alters the displayed color scheme.
auto inverse inherit accent neutral off dark light alert affirmative informative negative
radius Changes the border radius of the NumberInput.
none (DEFAULT) nano tiny small medium large huge massive {VIEWPORT}:{RADIUS}
shape Changes the shape of the NumberInput.
circle pill {VIEWPORT}:{SHAPE}
sizing Renders the NumberInput at a different sizes.
nano tiny small medium large huge massive {VIEWPORT}:{SIZING}
variation Alters the rendered appearance of the NumberInput.
block flush
disabled Renders the NumberInput with disabled attribute, and styles the NumberInput partially transparent.
boolean
required Sets if the NumberInput should be required, which will fail submission on a
if missing.
boolean
readonly Sets if the NumberInput should be readonly, which will prevent further edits.
boolean
name Sets the form name of the NumberInput.
string
placeholder Sets the text that is rendered if there is no current value.
string
value Sets the text value of the NumberInput.
number
max Sets the maximum amount of characters that the end-user CAN input, which will fail submission on a if the input is invalid.
number string
min Sets the minimum amount of characters that the end-user MUST input, which will fail submission on a if the input is invalid.
number string
span_x= Sets the width of the NumberInput to an approximation of the amount of characters to display.
number string

Events

NumberInput

Name Description Types
change Fires whenever the NumberInput loses focus and its value was changed.
InputEvent
input Fires whenever the NumberInput has its value changed.
InputEvent