rayine-ui/docs/content/2.components/input.md

description	since
The input component is used to get user input	1.3.2

Usage

The basic usage.

:::ComponentPreview

privateProps: placeholder: "Type something..."

:::

Sizes

::ComponentPreview

privateProps: placeholder: "Type something..." props: size: sm

::

Colors

The color prop affects the color of the border.

::ComponentPreview

props: color: primary

::

Variants

::ComponentPreview

privateProps: placeholder: "Search..." props: variant: outline

::

Type

The type prop changes the type of the input. All the aviailable types can be found at MDN.

::ComponentPreview

privateProps: placeholder: "Type anything..." props: type: text

::

Placeholder

The placeholder prop sets the placeholder text. It is shown when the input is empty.

::ComponentPreview

props: placeholder: "Type anything..."

::

Padded

Inputs can be with no padding.

::ComponentPreview

privateProps: placeholder: "Search..." variant: plain props: padded: false

::

Disabled

Inputs can be disabled.

::ComponentPreview

privateProps: placeholder: "Search..." props: disabled: true

::

Model Modifiers

.trim

The .trim modifier trims the input value.

<script lang="ts" setup>
const modal = ref<string>("");
</script>

<template>
  <RayInput v-model.trim="modal" />
</template>

.number

The .number modifier converts the input value to a number. Non-numeric values are ignored.

<script lang="ts" setup>
const modal = ref<number>(0);
</script>

<template>
  <RayInput v-model.number="modal" />
</template>

.lazy

The .lazy modifier syncs the input value with the model only on change event.

<script lang="ts" setup>
const modal = ref<string>("");
</script>

<template>
  <RayInput v-model.lazy="modal" />
</template>

API

Props

::ComponentProps ::

Config

::ComponentDefaults ::