SInputNumber

<SInputNumber> is a input component for number.

@globalbrain/sefirot/lib/components/SInputNumber.vue

View in Histoire

Usage

Import <SInputNumber> component and pass in the :value prop.

<script setup lang="ts">
import { ref } from 'vue'
import SInputNumber from '@globalbrain/sefirot/lib/components/SInputNumber.vue'

const input = ref<number | null>(null)
</script>

<template>
  <SInputNumber placeholder="123456789" v-model="input" />
</template>

Props

Here are the list of props you may pass to the component.

:size

Defines the size of the input. The default is 'small'.

interface Props {
  size?: 'mini' | 'small' | 'medium'
}

<SInputNumber size="small" v-model="..." />

:name

Defines the name attribute of the underlining <input> element.

interface Props {
  name?: string
}

<SInputNumber name="age" v-model="..." />

:label

Defines the label text of the input.

interface Props {
  label?: string
}

<SInputNumber label="Age" v-model="..." />

:info

Shows help icon after the label and shows info in a tooltip when the user hovers the label.

interface Props {
  info?: string
}

<SInputNumber
  label="Age"
  info="Some helpful information."
  v-model="..."
/>

:note

Adds small help text after the label. Best used along with :label.

interface Props {
  note?: string
}

<SInputNumber label="Age" note="Optional" v-model="..." />

:placeholder

Defines the placeholder text to show when the value is empty.

interface Props {
  placeholder?: string
}

<SInputNumber placeholder="123456789" v-model="..." />

:unit-before

Add a static text or icon before the input box.

interface Props {
  unitBefore?: string | Icon
}

<SInputNumber unit-before="$" v-model="..." />

:unit-after

Add a static text or icon after the input box.

interface Props {
  unitAfter?: string | Icon
}

<SInputNumber unit-after="USD" v-model="..." />

:check-icon

Icon to display at corner right of label. Useful to show the status of a particular input.

interface Props {
  checkIcon?: Component
}

<SInputNumber :check-icon="IconCheckCircle" />

:check-text

Text to display alongside :check-icon.

interface Props {
  checkText?: string
}

<SInputNumber :check-text="Saved" />

:check-color

Defines the color of :check-icon and :check-text. The default is 'neutral'.

interface Props {
  checkColor?: Color
}

type Color =
  | 'neutral'
  | 'mute'
  | 'info'
  | 'success'
  | 'warning'
  | 'danger'

<SInputNumber
  :check-icon="IconCheckCircle"
  check-text="Uploaded"
  check-color="success"
/>

:text-color

Defines the color of the input text. You can pass the TextColor or the callback that takes an input value as an argument and returns the TextColor. The default is 'neutral'.

interface Props {
  textColor?: TextColor | ((value: number | null) => TextColor)
}

type TextColor = 
  | 'neutral'
  | 'info'
  | 'success'
  | 'warning'
  | 'danger'

<SInputNumber text-color="info" v-model="..." />

:align

Defines how the input value is aligned inside the input box. The default is 'left'.

interface Props {
  align?: 'left' | 'center' | 'right'
}

<SInputNumber align="right" v-model="..." />

:separator

When this prop is set, the value gets displayed by adding comma to every 3 digits in the number. For example, 123456789 becomes 123,456,789. The default is false.

interface Props {
  separator?: boolean
}

<SInputNumber separator v-model="..." />

:disabled

Mark input as disabled. When this prop is set, users may not be able to focus the element nor trigger any events.

interface Props {
  disabled?: boolean
}

<SInputNumber disabled v-model="..." />

:value

Sets the input value. When :model-value is set (e.g. via v-model directive), this prop is ignored.

interface Props {
  value?: number | null
}

<SInputNumber :value="1" />

:model-value

The v-model binding for the input.

interface Props {
  modelValue?: number | null
}

<SInputNumber v-model="1" />

:validation

The validation object for the input. It accepts Vuelidate like validation object and displays error if there're any.

import { Ref } from 'vue'

interface Props {
  validation?: Validatable
}

interface Validatable {
  readonly $dirty: boolean
  readonly $invalid: boolean
  readonly $errors: ValidatableError[]
  readonly $touch: () => void
}

interface ValidatableError {
  readonly $message: string | Ref<string>
}

<SInputNumber v-model="1" :validation />

:hide-error

Stop showing validation error message even when there are errors. This prop will not prevent the error color from appearing.

interface Props {
  hideError?: boolean
}

<SInputNumber
  v-model="1"
  :validation
  hide-error
/>

Slots

Here are the list of slots you may define within the component.

#info

Same as :info prop. When both :info and this slot are defined, this slot will take precedence.

<SInputNumber label="Age" v-model="...">
  <template #info>
    Learn more about this field <SLink href="...">here</SLink>.
  </template>
</SInputNumber>

#addon-before

Inject <SInputAddon> before the input. Learn more details about addon in Components: SInputAddon.

<SInputNumber label="..." v-model="...">
  <template #addon-before>
    <SInputAddon label="@" />
  </template>
</SInputNumber>

#addon-after

Inject <SInputAddon> after the input. Learn more details about addon in Components: SInputAddon.

<SInputNumber label="..." v-model="...">
  <template #addon-after>
    <SInputAddon label="@" />
  </template>
</SInputNumber>

Events

Here are the list of events the component may emit.

@update:model-value

Emits when the user inputs any value. This event is always emitted together with the @input event.

interface Emits {
  'update:model-value': [value: number | null]
}

@input

Emits when the user inputs any value. This event is always emitted together with the @update:model-value event.

interface Emits {
  change: [value: number | null]
}

Styles

You may customize the styles by overriding --input prefixed CSS variables.

Global input styles

You may customize the various styles of the component via global input related CSS variables. Please refer to Styles: Input Styles page.