Input

An input box designed for text entry.

Nuxt UI

Git

Usage

Use the v-model directive to control the value of the Input.

Details

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

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

<template>
  <B24Input v-model="value" />
</template>

Type

Use the type prop to change the input type. Defaults to text.

Some types have been implemented in their own components such as Checkbox, Radio etc. and others have been styled like file for example.

Details

<script setup lang="ts">
export interface ExampleProps {
  type?: any
}

withDefaults(defineProps<ExampleProps>(), {
  type: 'file'
})
</script>

<template>
  <B24Input
    :type="type"
  />
</template>

INFO

You can check all the available types on the MDN Web Docs.

Placeholder

Use the placeholder prop to set a placeholder text.

Details

<script setup lang="ts">
export interface ExampleProps {
  placeholder?: string
}

withDefaults(defineProps<ExampleProps>(), {
  placeholder: 'Search...'
})
</script>

<template>
  <B24Input
    :placeholder="placeholder"
  />
</template>

Color

Use the color prop to change the ring color when the Input is focused.

INFO

The highlight prop is used here to show the focus state. It's used internally when a validation error occurs.

Details

<script setup lang="ts">
import type { InputProps } from '@bitrix24/b24ui-nuxt/types/index.ts'

export interface ExampleProps {
  color?: InputProps['color']
  isHighlight?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  color: 'default',
  isHighlight: true
})
</script>

<template>
  <B24Input
    :color="color"
    :highlight="isHighlight"
    placeholder="Search..."
  />
</template>

Tag

Use the tag property to display a small legend on top of the Input.

Use the tagColor property to set the color for tag.

Details

<script setup lang="ts">
import type { InputProps } from '@bitrix24/b24ui-nuxt/types/index.ts'

export interface ExampleProps {
  tagColor?: InputProps['tagColor']
  tag?: string
}

withDefaults(defineProps<ExampleProps>(), {
  tagColor: 'default',
  tag: 'info'
})
</script>

<template>
  <B24Input
    :tag-color="tagColor"
    :tag="tag"
    placeholder="Search..."
  />
</template>

Size

Use the size prop to change the size of the Input.

Size

Use the size prop to change the size of the Switch.

Details

<script setup lang="ts">
import type { InputProps } from '@bitrix24/b24ui-nuxt/types/index.ts'

export interface ExampleProps {
  size?: InputProps['size']
}

withDefaults(defineProps<ExampleProps>(), {
  size: 'md' as const
})
</script>

<template>
  <B24Input
    :size="size"
    placeholder="Search..."
  />
</template>

Icon

Use the icon prop to show an @bitrix24/b24icons inside the Input.

Details

<script setup lang="ts">
import CrmSearchIcon from '@bitrix24/b24icons-vue/crm/CrmSearchIcon'
</script>

<template>
  <B24Input
    :icon="CrmSearchIcon"
    placeholder="Search..."
  />
</template>

Use the leading-icon and trailing-icon props to set a different icon for each position.

Details

<script setup lang="ts">
import TaskIcon from '@bitrix24/b24icons-vue/button/TaskIcon'
import RocketIcon from '@bitrix24/b24icons-vue/main/RocketIcon'
</script>

<template>
  <B24Input
    :icon="RocketIcon"
    :trailing-icon="TaskIcon"
    placeholder="Search..."
  />
</template>

Avatar

Use the avatar prop to show an Avatar inside the Input.

Details

<script setup lang="ts">
import Bitrix24Icon from '@bitrix24/b24icons-vue/common-service/Bitrix24Icon'
</script>

<template>
  <B24Input
    :avatar="{ src: '/b24ui/avatar/employee.png' }"
    placeholder="Search..."
  />
  <B24Input
    :avatar="{ icon: Bitrix24Icon }"
    placeholder="Search..."
  />
</template>

Loading

Use the loading prop to show a loading icon on the Input.

Details

<script setup lang="ts">
export interface ExampleProps {
  isLoading?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  isLoading: true
})
</script>

<template>
  <B24Input
    placeholder="Search..."
    :loading="isLoading"
  />
</template>

Disabled

Use the disabled prop to disable the Input.

Details

<script setup lang="ts">
export interface ExampleProps {
  isDisabled?: boolean
}

withDefaults(defineProps<ExampleProps>(), {
  isDisabled: true
})
</script>

<template>
  <B24Input
    placeholder="Search..."
    :disabled="isDisabled"
  />
</template>

API

Props

Prop	Default	Type
as	'div'	any The element or component this component should render as.
id		string
name		string
type	"text"	"number" | "reset" | "submit" | "image" | "color" | "button" | "date" | "time" | string & {} | "search" | "text" | "range" | "month" | "checkbox" | "file" | "datetime-local" | "email" | "hidden" | "password" | "radio" | "tel" | "url" | "week"
placeholder		string The placeholder text when the input is empty.
color	'primary'	"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
size	'md'	"lg" | "md" | "xs" | "sm"
noPadding	false	boolean Removes padding from input
noBorder	false	boolean Removes all borders (rings)
underline	false	boolean Removes all borders (rings) except the bottom one
rounded	false	boolean Rounds the corners of the button
required	false	boolean
autocomplete	"off"	string
autofocus	false	boolean
autofocusDelay	0	number
disabled	false	boolean
tag		string
tagColor	'primary'	"default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai"
highlight	false	boolean Highlight the ring color like a focus state
b24ui		{ root?: ClassNameValue; base?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; leadingAvatar?: ClassNameValue; leadingAvatarSize?: ClassNameValue; trailing?: ClassNameValue; trailingIcon?: ClassNameValue; tag?: ClassNameValue; }
icon	icons.loading	(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any Display an icon on the left side.
avatar		AvatarProps Display an avatar on the left side.
loading		boolean When `true`, the loading icon will be displayed.
trailing		boolean When `true`, the icon will be displayed on the right side.
trailingIcon		(props: HTMLAttributes & VNodeProps & {}, ctx: Omit<{ attrs: Data; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<...>>(exposed?: Exposed) => void; }, "expose">): any Display an icon on the right side.
modelValue		null | string | number

Slots

Slot	Type
leading	{}
default	{}
trailing	{}

Emits

Event	Type

Expose

When accessing the component via a template ref, you can use the following:

Name	Type
inputRef	Ref<HTMLInputElement | null>