Input
v1.3.2
The input component is used to get user input
Usage
The basic usage.
<template>
<RayInput placeholder="Type something..." />
</template>
Sizes
<template>
<RayInput size="sm" placeholder="Type something..." />
</template>
Colors
The color prop affects the color of the border.
<template>
<RayInput color="primary" />
</template>
Variants
<template>
<RayInput variant="outline" placeholder="Search..." />
</template>
Type
The type prop changes the type of the input. All the aviailable types can be found at MDN.
<template>
<RayInput type="text" placeholder="Type anything..." />
</template>
Placeholder
The placeholder prop sets the placeholder text. It is shown when the input is empty.
<template>
<RayInput placeholder="Type anything..." />
</template>
Padded
Inputs can be with no padding.
<template>
<RayInput :padded="false" placeholder="Search..." variant="plain" />
</template>
Disabled
Inputs can be disabled.
<template>
<RayInput disabled placeholder="Search..." />
</template>
Model Modifiers
.trim
The .trim modifier trims the input value.
page
<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.
page
<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.
page
<script lang="ts" setup>
const modal = ref<string>("");
</script>
<template>
<RayInput v-model.lazy="modal" />
</template>
API
Props
| Prop | Default | Type |
|---|---|---|
| size | config.default.size | InputSize | undefined |
| color | config.default.color | string | undefined |
| variant | config.default.variant | InputVariant | undefined |
| type | "text" | InputType | undefined |
| disabled | false | boolean | undefined |
| padded | true | boolean | undefined |
| ui | {} | ({ wrapper?: string | undefined; base?: string | undefined; placeholder?: string | undefined; rounded?: string | undefined; size?: DeepPartial<{ '2xs': "text-xs"; xs: "text-xs"; sm: "text-sm"; md: "text-sm"; lg: "text-sm"; xl: "text-base"; }, any> | undefined; padding?: DeepPartial<...> | undefined; variant?: DeepPa... |
| required | false | boolean | undefined |
| placeholder | null | string | undefined |
| modelValue | "" | string | number | null | undefined |
| autofocus | false | boolean | undefined |
| autofocusDelay | 100 | number | undefined |
| modelModifiers | {} | InputModelModifiers | undefined |
Theme
{
wrapper: 'relative',
base: 'relative w-full block focus:outline-none disabled:cursor-not-allowed disabled:opacity-70 transition',
placeholder: 'placeholder:text-gray-400 dark:placeholder:text-gray-500',
rounded: 'rounded-md',
size: {
'2xs': 'text-xs',
xs: 'text-xs',
sm: 'text-sm',
md: 'text-sm',
lg: 'text-sm',
xl: 'text-base'
},
padding: {
'2xs': 'px-2 py-1',
xs: 'px-2.5 py-1.5',
sm: 'px-2.5 py-1.5',
md: 'px-3 py-2',
lg: 'px-3.5 py-2.5',
xl: 'px-3.5 py-2.5'
},
variant: {
outline: 'shadow-sm bg-transparent text-gray-900 dark:text-white ring ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-{color}-500 dark:focus:ring-{color}-400',
plain: 'bg-transparent'
},
default: {
size: 'sm',
color: 'primary',
variant: 'outline'
}
}