Input

Default

Add an elements input facilitate with the component input

Code copied

<template>
  <div class="center content-inputs">
    <s-input v-model="value" placeholder="Name" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
</script>

Clearable

Set allow-clear to show a clear button at the end while the input is hovered or focused. Pressing Escape also clears the current value.

Code copied

<template>
  <div class="center content-inputs">
    <s-input
      v-model="value"
      allow-clear
      placeholder="Type something to clear"
    />
  </div>
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'

const value = shallowRef('Hover over or focus this input')
</script>

Label

Add a label to the input with the property label

Code copied

<template>
  <div class="center content-inputs">
    <s-input v-model="value" label="Full Name" placeholder="Evan You" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
</script>

Label Float

You can have a placeholder with a great animation when being or in focus or with a value becoming a label above the input with the property label-float

Code copied

<template>
  <div class="center content-inputs">
    <s-input v-model="value" label="Country" label-float />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
</script>

Color

Change the color of the component and add a border below with the color property, the allowed values ​​are the main colors of Sax Design and the colors (RGB y HEX)

Code copied

<template>
  <div class="center content-inputs">
    <s-input v-model="value" color="primary" placeholder="Primary" />

    <s-input v-model="value2" color="success" placeholder="Success Icon">
      <template #icon>
        <s-icon  name="bx:user" />
      </template>
    </s-input>

    <s-input
      v-model="value3"
      color="danger"
      icon-after
      placeholder="Danger icon after"
    >
      <template #icon>
        <s-icon  name="bx:mail-send" />
      </template>
    </s-input>

    <s-input
      v-model="value4"
      color="warn"
      placeholder="Label Warn"
      label="Warn"
    />

    <s-input v-model="value5" color="dark" label="Dark" label-float />

    <s-input v-model="value6" color="#7D33FF" placeholder="HEX #7D33FF" />

    <s-input
      v-model="value7"
      color="rgb(59, 222, 200)"
      placeholder="RGB(59, 222, 200)"
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')
const value5 = ref('')
const value6 = ref('')
const value7 = ref('')
</script>

Icon

Add an icon to the input easily with the slot icon if you want the icon to be before the input you can do it with the property icon-before

Default icons

Sax Design Vue renders build-time Iconify SVG data. Built-in controls, such as close buttons in Alert or Popup, use SVG icons and require no external icon font. Use the #icon slot when a product needs another icon.

Find and use icons

Search Boxicons for a collection and copy its prefix:name value into SIcon.

Code copied

<template>
  <div class="center content-inputs">
    <s-input v-model="value1" placeholder="User name">
      <template #icon>
        <s-icon  name="bx:user" />
      </template>
    </s-input>

    <s-input v-model="value2" type="password" icon-after placeholder="Password">
      <template #icon>
        <s-icon  name="bx:lock-open-alt" />
      </template>
    </s-input>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref('')
const value2 = ref('')

</script>

<style lang="scss" scoped>
.content-inputs {
  display: flex;
  align-items: center;

Message

You can add a message below the input with the #message-{Sax Design color} to report that a field is missing or the value is wrong

Code copied

<template>
  <div class="center content-inputs">
    <s-input v-model="value1" placeholder="Email">
      <template #message-success> Email Valid </template>
    </s-input>

    <s-input v-model="value2" placeholder="Name">
      <template #message-danger> Required </template>
    </s-input>

    <s-input v-model="value3" type="password" placeholder="Password">
      <template #message-warn> Insecure password </template>
    </s-input>

    <s-input
      v-model="value4"
      label="Example Regex Validation"
      placeholder="hello@sax-design.dev"
    >
      <template v-if="validEmail" #message-success> Email Valid </template>
      <template v-if="!validEmail && value4 !== ''" #message-danger>
        Email Invalid
      </template>
    </s-input>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'

const value1 = ref('hello@sax-design.dev')
const value2 = ref('')
const value3 = ref('123456')
const value4 = ref('')
const REGEX_EMAIL =
  /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/

const validEmail = computed(() => REGEX_EMAIL.test(value4.value))
</script>

State

Change the color of the input for some state, the allowed states are (primary, success, danger, warn, dark)

Code copied

<template>
  <div class="center content-inputs">
    <s-input v-model="value" state="primary" placeholder="Primary" />

    <s-input v-model="value2" state="success" placeholder="Success Icon">
      <template #icon>
        <s-icon  name="bx:user" />
      </template>
    </s-input>

    <s-input
      v-model="value3"
      state="danger"
      icon-after
      placeholder="Danger icon after"
    >
      <template #icon>
        <s-icon  name="bx:mail-send" />
      </template>
    </s-input>

    <s-input
      v-model="value4"
      state="warn"
      placeholder="Label Warn"
      label="Warn"
    />

    <s-input v-model="value5" state="dark" label="Dark" label-float />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const value2 = ref('')
const value3 = ref('')
const value4 = ref('')
const value5 = ref('')
</script>

Progress

Add a validation progress bar, the most common is its use to validate passwords and correct data within the input, its value is (0 - 100).

The example validates that the password has at least

• A special character
• More than 6 digits
• One lower case letter
• An uppercase letter
• A number

Code copied

<template>
  <div class="center content-inputs">
    <s-input
      v-model="value"
      :type="inputType"
      :progress="getProgress"
      label="Password"
      label-float
      icon-after
      @click-icon="hasVisiblePassword = !hasVisiblePassword"
    >
      <template #icon>
        <s-icon v-if="!hasVisiblePassword"  name="bx:show-alt" />
        <s-icon v-else  name="bx:hide" />
      </template>

      <template v-if="getProgress >= 100" #message-success>
        Secure password
      </template>
    </s-input>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'

const value = ref('')
const hasVisiblePassword = ref(false)

const inputType = computed(() =>
  hasVisiblePassword.value ? 'text' : 'password'
)

const getProgress = computed(() => {
  let progress = 0
  // at least one number
  if (/\d/.test(value.value)) {
    progress += 20
  }
  // at least one capital letter
  if (/(.*[A-Z].*)/.test(value.value)) {
    progress += 20
  }
  // at menons a lowercase
  if (/(.*[a-z].*)/.test(value.value)) {
    progress += 20
  }
  // more than 5 digits
  if (value.value.length >= 6) {
    progress += 20
  }
  // at least one special character
  if (/[^A-Za-z0-9]/.test(value.value)) {
    progress += 20
  }
  return progress
})
</script>

Loading

Add a loading animation to the input with the loading property, the property is a Boolean, so you can add it without any value.

Code copied

<template>
  <div class="center content-inputs">
    <s-input v-model="value" loading placeholder="Name" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
</script>

Input types

Use type for text-oriented inputs: text, password, search, number, email, tel, or url. Date and time values use SDatePicker and STimePicker so formatting, themes, and popup behavior remain consistent.

Code copied

<template>
  <div class="center content-inputs">
    <s-input v-model="value1" type="text" label="Text" />
    <s-input v-model="value2" type="password" label="Password" />
    <s-input
      v-model="value3"
      type="search"
      label="Search"
      controls
      @search-click="handleSearch"
    />
    <s-input v-model="value4" type="number" label="Number" />
    <s-input v-model="value5" type="url" label="Url" />

    <p class="search-feedback" role="status" aria-live="polite">
      {{ searchFeedback }}
    </p>
  </div>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'

const value1 = shallowRef('')
const value2 = shallowRef('')
const value3 = shallowRef('')
const value4 = shallowRef('')
const value5 = shallowRef('')
const searchFeedback = shallowRef(
  'Press Enter or click the search icon to emit search-click.',
)

const handleSearch = (value: string) => {
  searchFeedback.value = `Captured search-click: ${value || '(empty)'}`
}
</script>

Border - Shadow

Change everything is style of the component with the input-style property, the property is a String with values border . shadow . transparent

Code copied

<template>
  <div class="center content-inputs">
    <s-input v-model="value" input-style="border" placeholder="Name" />

    <s-input
      v-model="value2"
      color="#7d33ff"
      input-style="shadow"
      placeholder="Password"
      type="password"
    >
      <template #icon>
        <s-icon  name="bx:lock-open-alt" />
      </template>
    </s-input>

    <s-input
      v-model="value3"
      color="warn"
      label="Address"
      label-float
      input-style="transparent"
      icon-after
      type="email"
    >
      <template #icon>
        <s-icon  name="bxl:bitcoin" />
      </template>
    </s-input>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref('')
const value2 = ref('')
const value3 = ref('')
</script>

<style lang="scss" scoped>
.content-inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;

  .s-input {
    margin: 0;
  }

Affixes

Add prefix and suffix icons with prefix-icon and suffix-icon. Use the matching slots when the affix needs fully custom content.

Code copied

<template>
  <div class="input-affix-demo">
    <s-input
      v-model="query"
      prefix-icon="cb:search"
      placeholder="Search keywords"
    />
    <s-input
      v-model="profileName"
      suffix-icon="cb:user"
      placeholder="Profile name"
    />
  </div>
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'

const query = shallowRef('')
const profileName = shallowRef('')
</script>

Sizes

Use size to render a small, default, or large input.

Code copied

<template>
  <div class="input-size-demo">
    <s-input size="small" placeholder="Small" />
    <s-input placeholder="Default" />
    <s-input size="large" placeholder="Large" />
  </div>
</template>

Search

Set type="search" with controls to show the search action. Pressing Enter or clicking the action emits search-click.

Code copied

<template>
  <div class="input-action-demo">
    <s-input
      v-model="query"
      type="search"
      controls
      placeholder="Search product"
      @search-click="handleSearch"
    />
    <span class="input-action-demo__status" aria-live="polite">
      Last search: {{ lastSearch || '—' }}
    </span>
  </div>
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'

const query = shallowRef('')
const lastSearch = shallowRef('')

const handleSearch = (value: string) => {
  lastSearch.value = value
}
</script>

Deferred commit

Set immediate="false" to synchronize v-model on change or blur. Type a value and click outside the field to see the committed value update.

Code copied

<template>
  <div class="input-action-demo">
    <s-input
      v-model="committedValue"
      :immediate="false"
      label="Profile name"
      placeholder="Type, then click outside"
    />
    <span class="input-action-demo__status" aria-live="polite">
      Committed: {{ committedValue || '—' }}
    </span>
  </div>
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'

const committedValue = shallowRef('')
</script>

Character count

Use max-length with show-word-count to limit and display the count. count-method customizes both behaviors; the second field counts UTF-8 bytes.

Code copied

<template>
  <div class="input-count-demo">
    <s-input
      v-model="textValue"
      placeholder="Up to 12 characters"
      :max-length="12"
      show-word-count
    />
    <s-input
      v-model="encodedValue"
      placeholder="Up to 12 UTF-8 bytes"
      :max-length="12"
      :count-method="countUtf8Bytes"
      show-word-count
    />
  </div>
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'

const textValue = shallowRef('')
const encodedValue = shallowRef('')

const countUtf8Bytes = ({ value }: { value: string }) =>
  new TextEncoder().encode(value).length
</script>

Native constraints

Common native constraints such as min, max, step, input-mode, pattern, and required are forwarded to the inner input. Number inputs also clamp typed and pasted values to the configured min–max range.

Code copied

<template>
  <s-input
    v-model="quantity"
    type="number"
    label="Quantity"
    placeholder="1–10"
    :min="1"
    :max="10"
    :step="1"
    input-mode="numeric"
    required
  />
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'

const quantity = shallowRef('')
</script>

API