Input

Um elemento de input para digitar texto.

Uso

Use a diretiva v-model para controlar o valor do Input.

<script setup lang="ts">
const value = ref('')
</script>

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

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

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

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

Tipo

Use a prop type para alterar o tipo do input. O padrão é text.

Alguns tipos foram implementados em seus próprios componentes, como Checkbox, Radio, InputNumber, etc., e outros foram estilizados, como o file, por exemplo.

type

<template>
  <NInput type="file" />
</template>

Você pode conferir todos os tipos disponíveis no MDN Web Docs.

Placeholder

Use a prop placeholder para definir um texto de placeholder.

placeholder

<template>
  <NInput placeholder="Search..." />
</template>

Cor

Use a prop color para alterar a cor do ring quando o Input está em foco.

color

highlight

<template>
  <NInput color="neutral" highlight placeholder="Search..." />
</template>

A prop highlight é usada aqui para mostrar o estado de foco. Ela é usada internamente quando ocorre um erro de validação.

Variante

Use a prop variant para alterar a variante do Input.

color

variant

highlight

<template>
  <NInput color="neutral" variant="subtle" placeholder="Search..." />
</template>

Tamanho

Use a prop size para alterar o tamanho do Input.

size

<template>
  <NInput size="xl" placeholder="Search..." />
</template>

Ícone

Use a prop icon para exibir um Icon dentro do Input.

icon

size

variant

<template>
  <NInput icon="i-lucide-search" size="md" variant="outline" placeholder="Search..." />
</template>

Use as props leading e trailing para definir a posição do ícone ou as props leading-icon e trailing-icon para definir um ícone diferente para cada posição.

trailingIcon

size

<template>
  <NInput trailing-icon="i-lucide-at-sign" placeholder="Enter your email" size="md" />
</template>

Avatar

Use a prop avatar para exibir um Avatar dentro do Input.

avatar.src

size

variant

<template>
  <NInput
    :avatar="{
      src: 'https://github.com/nuxt.png',
      loading: 'lazy'
    }"
    size="md"
    variant="outline"
    placeholder="Search..."
  />
</template>

Carregando

Use a prop loading para exibir um ícone de carregamento no Input.

trailing

<template>
  <NInput loading placeholder="Search..." />
</template>

Ícone de carregamento

Use a prop loading-icon para personalizar o ícone de carregamento. O padrão é i-lucide-loader-circle.

loadingIcon

<template>
  <NInput loading loading-icon="i-lucide-loader" placeholder="Search..." />
</template>

Você pode personalizar esse ícone globalmente no seu app.config.ts na chave ui.icons.loading.

Você pode personalizar esse ícone globalmente no seu vite.config.ts na chave ui.icons.loading.

Desabilitado

Use a prop disabled para desabilitar o Input.

disabled

<template>
  <NInput disabled placeholder="Search..." />
</template>

Exemplos

Com botão de limpar

Você pode colocar um Button dentro do slot #trailing para limpar o Input.

Com botão de copiar

Você pode colocar um Button dentro do slot #trailing para copiar o valor para a área de transferência.

Com alternância de senha

Você pode colocar um Button dentro do slot #trailing para alternar a visibilidade da senha.

Com indicador de força da senha

Você pode usar o componente Progress para exibir o indicador de força da senha.

Senha

Enter a password. Must contain:

Pelo menos 8 caracteres - Requirement not met
Pelo menos 1 número - Requirement not met
Pelo menos 1 letra minúscula - Requirement not met
Pelo menos 1 letra maiúscula - Requirement not met

Com limite de caracteres

Você pode usar o slot #trailing para adicionar um limite de caracteres ao Input.

0/15

Com atalho de teclado

Você pode usar o componente Kbd dentro do slot #trailing para adicionar um atalho de teclado ao Input.

/

Este exemplo usa o composable defineShortcuts para focar o Input quando a tecla / é pressionada.

Não vamos compartilhar seu e-mail.

Ele também oferece validação e tratamento de erros quando usado dentro de um componente Form.

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`id`		`string`
`name`		`string`
`type`	`'text'`	`"number" \| "image" \| "text" \| "button" \| "search" \| "time" \| "color" \| "checkbox" \| "date" \| "datetime-local" \| "email" \| "file" \| "hidden" \| "month" \| "password" \| "radio" \| "range" \| "reset" \| "submit" \| "tel" \| "url" \| "week" \| string & {}`
`placeholder`		`string` The placeholder text when the input is empty.
`color`	`'primary'`	`"primary" \| "secondary" \| "accent" \| "success" \| "info" \| "warning" \| "error" \| "neutral"`
`variant`	`'outline'`	`"outline" \| "soft" \| "subtle" \| "ghost" \| "none"`
`size`	`'md'`	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`
`required`		`boolean`
`autocomplete`	`'off'`	`string & {} \| "on" \| "off"`
`autofocus`		`boolean`
`autofocusDelay`	`0`	`number`
`disabled`		`boolean`
`highlight`		`boolean` Highlight the ring color like a focus state.
`fixed`		`boolean` Keep the mobile text size on all breakpoints.
`modelValue`		`_Number<_Optional<_Nullable<T, Mod>, Mod>, Mod>`
`defaultValue`		`_Number<_Optional<_Nullable<T, Mod>, Mod>, Mod>`
`modelModifiers`		`Mod`
`icon`		`any` Display an icon based on the `leading` and `trailing` props.
`avatar`		`AvatarProps` Display an avatar on the left side.
`leading`		`boolean` When `true`, the icon will be displayed on the left side.
`leadingIcon`		`any` Display an icon on the left side.
`trailing`		`boolean` When `true`, the icon will be displayed on the right side.
`trailingIcon`		`any` Display an icon on the right side.
`loading`		`boolean` When `true`, the loading icon will be displayed.
`loadingIcon`	`appConfig.ui.icons.loading`	`any` The icon when the `loading` prop is `true`.
`list`		`string`
`max`		`string \| number`
`maxlength`		`string \| number`
`min`		`string \| number`
`minlength`		`string \| number`
`pattern`		`string`
`readonly`		`false \| true \| "true" \| "false"`
`step`		`string \| number`
`ui`		`{ root?: SlotClass; base?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; leadingAvatar?: SlotClass; leadingAvatarSize?: SlotClass; trailing?: SlotClass; trailingIcon?: SlotClass; }`

Este componente também suporta todos os atributos HTML nativos de <input>.

Slots

Slot	Type
`leading`	`{ ui: object; }`
`default`	`{ ui: object; }`
`trailing`	`{ ui: object; }`

Emits

Event	Type
`update:modelValue`	`[value: _Number<_Optional<_Nullable<T, Mod>, Mod>, Mod>]`
`blur`	`[event: FocusEvent]`
`change`	`[event: Event]`

Expose

Ao acessar o componente por meio de um template ref, você pode usar o seguinte:

Name	Type
`inputRef`	`Ref<HTMLInputElement \| null>`

Tema

app.config.ts

export default defineAppConfig({
  ui: {
    input: {
      slots: {
        root: 'relative inline-flex items-center',
        base: [
          'w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75',
          'transition-colors'
        ],
        leading: 'absolute inset-y-0 start-0 flex items-center',
        leadingIcon: 'shrink-0 text-dimmed',
        leadingAvatar: 'shrink-0',
        leadingAvatarSize: '',
        trailing: 'absolute inset-y-0 end-0 flex items-center',
        trailingIcon: 'shrink-0 text-dimmed'
      },
      variants: {
        fieldGroup: {
          horizontal: {
            root: 'group has-focus-visible:z-[1]',
            base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
          },
          vertical: {
            root: 'group has-focus-visible:z-[1]',
            base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
          }
        },
        size: {
          xs: {
            base: 'px-2 py-1 text-sm/4 gap-1',
            leading: 'ps-2',
            trailing: 'pe-2',
            leadingIcon: 'size-4',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-4'
          },
          sm: {
            base: 'px-2.5 py-1.5 text-sm/4 gap-1.5',
            leading: 'ps-2.5',
            trailing: 'pe-2.5',
            leadingIcon: 'size-4',
            leadingAvatarSize: '3xs',
            trailingIcon: 'size-4'
          },
          md: {
            base: 'px-2.5 py-1.5 text-base/5 gap-1.5',
            leading: 'ps-2.5',
            trailing: 'pe-2.5',
            leadingIcon: 'size-5',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-5'
          },
          lg: {
            base: 'px-3 py-2 text-base/5 gap-2',
            leading: 'ps-3',
            trailing: 'pe-3',
            leadingIcon: 'size-5',
            leadingAvatarSize: '2xs',
            trailingIcon: 'size-5'
          },
          xl: {
            base: 'px-3 py-2 text-base gap-2',
            leading: 'ps-3',
            trailing: 'pe-3',
            leadingIcon: 'size-6',
            leadingAvatarSize: 'xs',
            trailingIcon: 'size-6'
          }
        },
        variant: {
          outline: 'text-highlighted bg-default ring ring-inset ring-accented',
          soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
          subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
          ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
          none: 'text-highlighted bg-transparent focus:outline-none'
        },
        color: {
          primary: '',
          secondary: '',
          accent: '',
          success: '',
          info: '',
          warning: '',
          error: '',
          neutral: ''
        },
        leading: {
          true: ''
        },
        trailing: {
          true: ''
        },
        loading: {
          true: ''
        },
        highlight: {
          true: ''
        },
        fixed: {
          false: ''
        },
        type: {
          file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none'
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary'
        },
        {
          color: 'primary',
          variant: [
            'soft',
            'ghost'
          ],
          class: 'outline-primary/25 focus-visible:outline-3'
        },
        {
          color: 'primary',
          highlight: true,
          class: 'ring ring-inset ring-primary'
        },
        {
          color: 'neutral',
          variant: [
            'outline',
            'subtle'
          ],
          class: 'outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted'
        },
        {
          color: 'neutral',
          variant: [
            'soft',
            'ghost'
          ],
          class: 'outline-inverted/25 focus-visible:outline-3'
        },
        {
          color: 'neutral',
          highlight: true,
          class: 'ring ring-inset ring-inverted'
        },
        {
          leading: true,
          size: 'xs',
          class: 'ps-7'
        },
        {
          leading: true,
          size: 'sm',
          class: 'ps-8'
        },
        {
          leading: true,
          size: 'md',
          class: 'ps-9'
        },
        {
          leading: true,
          size: 'lg',
          class: 'ps-10'
        },
        {
          leading: true,
          size: 'xl',
          class: 'ps-11'
        },
        {
          trailing: true,
          size: 'xs',
          class: 'pe-7'
        },
        {
          trailing: true,
          size: 'sm',
          class: 'pe-8'
        },
        {
          trailing: true,
          size: 'md',
          class: 'pe-9'
        },
        {
          trailing: true,
          size: 'lg',
          class: 'pe-10'
        },
        {
          trailing: true,
          size: 'xl',
          class: 'pe-11'
        },
        {
          loading: true,
          leading: true,
          class: {
            leadingIcon: 'animate-spin'
          }
        },
        {
          loading: true,
          leading: false,
          trailing: true,
          class: {
            trailingIcon: 'animate-spin'
          }
        },
        {
          fixed: false,
          size: 'xs',
          class: 'md:text-xs'
        },
        {
          fixed: false,
          size: 'sm',
          class: 'md:text-xs'
        },
        {
          fixed: false,
          size: 'md',
          class: 'md:text-sm'
        },
        {
          fixed: false,
          size: 'lg',
          class: 'md:text-sm'
        }
      ],
      defaultVariants: {
        size: 'md',
        color: 'accent',
        variant: 'outline'
      }
    }
  }
})

vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nitro/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        input: {
          slots: {
            root: 'relative inline-flex items-center',
            base: [
              'w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75',
              'transition-colors'
            ],
            leading: 'absolute inset-y-0 start-0 flex items-center',
            leadingIcon: 'shrink-0 text-dimmed',
            leadingAvatar: 'shrink-0',
            leadingAvatarSize: '',
            trailing: 'absolute inset-y-0 end-0 flex items-center',
            trailingIcon: 'shrink-0 text-dimmed'
          },
          variants: {
            fieldGroup: {
              horizontal: {
                root: 'group has-focus-visible:z-[1]',
                base: 'group-not-only:group-first:rounded-e-none group-not-only:group-last:rounded-s-none group-not-last:group-not-first:rounded-none'
              },
              vertical: {
                root: 'group has-focus-visible:z-[1]',
                base: 'group-not-only:group-first:rounded-b-none group-not-only:group-last:rounded-t-none group-not-last:group-not-first:rounded-none'
              }
            },
            size: {
              xs: {
                base: 'px-2 py-1 text-sm/4 gap-1',
                leading: 'ps-2',
                trailing: 'pe-2',
                leadingIcon: 'size-4',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-4'
              },
              sm: {
                base: 'px-2.5 py-1.5 text-sm/4 gap-1.5',
                leading: 'ps-2.5',
                trailing: 'pe-2.5',
                leadingIcon: 'size-4',
                leadingAvatarSize: '3xs',
                trailingIcon: 'size-4'
              },
              md: {
                base: 'px-2.5 py-1.5 text-base/5 gap-1.5',
                leading: 'ps-2.5',
                trailing: 'pe-2.5',
                leadingIcon: 'size-5',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-5'
              },
              lg: {
                base: 'px-3 py-2 text-base/5 gap-2',
                leading: 'ps-3',
                trailing: 'pe-3',
                leadingIcon: 'size-5',
                leadingAvatarSize: '2xs',
                trailingIcon: 'size-5'
              },
              xl: {
                base: 'px-3 py-2 text-base gap-2',
                leading: 'ps-3',
                trailing: 'pe-3',
                leadingIcon: 'size-6',
                leadingAvatarSize: 'xs',
                trailingIcon: 'size-6'
              }
            },
            variant: {
              outline: 'text-highlighted bg-default ring ring-inset ring-accented',
              soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
              subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
              ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
              none: 'text-highlighted bg-transparent focus:outline-none'
            },
            color: {
              primary: '',
              secondary: '',
              accent: '',
              success: '',
              info: '',
              warning: '',
              error: '',
              neutral: ''
            },
            leading: {
              true: ''
            },
            trailing: {
              true: ''
            },
            loading: {
              true: ''
            },
            highlight: {
              true: ''
            },
            fixed: {
              false: ''
            },
            type: {
              file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none'
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'outline-primary/25 focus-visible:outline-3 focus-visible:ring-primary'
            },
            {
              color: 'primary',
              variant: [
                'soft',
                'ghost'
              ],
              class: 'outline-primary/25 focus-visible:outline-3'
            },
            {
              color: 'primary',
              highlight: true,
              class: 'ring ring-inset ring-primary'
            },
            {
              color: 'neutral',
              variant: [
                'outline',
                'subtle'
              ],
              class: 'outline-inverted/25 focus-visible:outline-3 focus-visible:ring-inverted'
            },
            {
              color: 'neutral',
              variant: [
                'soft',
                'ghost'
              ],
              class: 'outline-inverted/25 focus-visible:outline-3'
            },
            {
              color: 'neutral',
              highlight: true,
              class: 'ring ring-inset ring-inverted'
            },
            {
              leading: true,
              size: 'xs',
              class: 'ps-7'
            },
            {
              leading: true,
              size: 'sm',
              class: 'ps-8'
            },
            {
              leading: true,
              size: 'md',
              class: 'ps-9'
            },
            {
              leading: true,
              size: 'lg',
              class: 'ps-10'
            },
            {
              leading: true,
              size: 'xl',
              class: 'ps-11'
            },
            {
              trailing: true,
              size: 'xs',
              class: 'pe-7'
            },
            {
              trailing: true,
              size: 'sm',
              class: 'pe-8'
            },
            {
              trailing: true,
              size: 'md',
              class: 'pe-9'
            },
            {
              trailing: true,
              size: 'lg',
              class: 'pe-10'
            },
            {
              trailing: true,
              size: 'xl',
              class: 'pe-11'
            },
            {
              loading: true,
              leading: true,
              class: {
                leadingIcon: 'animate-spin'
              }
            },
            {
              loading: true,
              leading: false,
              trailing: true,
              class: {
                trailingIcon: 'animate-spin'
              }
            },
            {
              fixed: false,
              size: 'xs',
              class: 'md:text-xs'
            },
            {
              fixed: false,
              size: 'sm',
              class: 'md:text-xs'
            },
            {
              fixed: false,
              size: 'md',
              class: 'md:text-sm'
            },
            {
              fixed: false,
              size: 'lg',
              class: 'md:text-sm'
            }
          ],
          defaultVariants: {
            size: 'md',
            color: 'accent',
            variant: 'outline'
          }
        }
      }
    })
  ]
})

Some colors in compoundVariants are omitted for readability. Check out the source code on GitLab.

Changelog

No recent changes

FormField

Um wrapper para elementos de formulário que fornece validação e tratamento de erros.

InputDate

Um componente de input para seleção de data.

Input

Uso

Tipo

Placeholder

Cor

Variante

Tamanho

Ícone

Avatar

Carregando

Ícone de carregamento

Desabilitado

Exemplos

Com botão de limpar

Com botão de copiar

Com alternância de senha

Com indicador de força da senha

Com limite de caracteres

Com atalho de teclado

Com máscara

Com rótulo flutuante

Dentro de um FormField

Dentro de um FieldGroup

Como campo de número de telefone

API

Props

Slots

Emits

Expose

Tema

Changelog