Input

Usage

<UInput />

Style

Use the color and variant props to change the visual style of the Input.

color

variant

<UInput color="primary" variant="outline" />

Besides all the colors from the ui.colors object, you can also use the white (default) and gray colors with their pre-defined variants.

White

variant

<UInput color="white" variant="outline" />

Gray

variant

<UInput color="gray" variant="outline" />

Size

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

size

<UInput size="sm" />

Placeholder

Use the placeholder prop to set a placeholder text.

placeholder

<UInput placeholder="Search..." />

Icon

Use any icon from Iconify by setting the icon prop by using this pattern: i-{collection_name}-{icon_name}.

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

size

color

trailing

<UInput icon="i-heroicons-magnifying-glass-20-solid" size="sm" color="white" :trailing="false" />

Disabled

Use the disabled prop to disable the Input.

disabled

<UInput disabled />

Loading

Use the loading prop to show a loading icon and disable the Input.

Use the loading-icon prop to set a different icon or change it globally in ui.input.default.loadingIcon. Defaults to i-heroicons-arrow-path-20-solid.

<UInput loading icon="i-heroicons-magnifying-glass-20-solid" />

Props

Prop	Default	Description
`modelValue`	`""`	`string \| number`
`name`	`null`	`string`
`type`	`"text"`	`string`
`placeholder`	`null`	`string`
`autocomplete`	`null`	`string`
`icon`	`null`	`string`
`loadingIcon`	`appConfig.ui.input.default.loadingIcon`	`string`
`leadingIcon`	`null`	`string`
`trailingIcon`	`null`	`string`
`size`	`appConfig.ui.input.default.size`	`string`
`color`	`appConfig.ui.input.default.color`	`string`
`variant`	`appConfig.ui.input.default.variant`	`string`
`required`	`false`	`boolean`
`disabled`	`false`	`boolean`
`readonly`	`false`	`boolean`
`autofocus`	`false`	`boolean`
`spellcheck`	`null`	`boolean`
`trailing`	`false`	`boolean`
`leading`	`false`	`boolean`
`loading`	`false`	`boolean`
`padded`	`true`	`boolean`
`ui`	`appConfig.ui.input`	`any`

Preset

{
  "wrapper": "relative",
  "base": "relative block w-full disabled:cursor-not-allowed disabled:opacity-75 focus:outline-none border-0",
  "rounded": "rounded-md",
  "placeholder": "placeholder-gray-400 dark:placeholder-gray-500",
  "custom": "",
  "size": {
    "2xs": "text-xs",
    "xs": "text-xs",
    "sm": "text-sm",
    "md": "text-sm",
    "lg": "text-base",
    "xl": "text-base"
  },
  "gap": {
    "2xs": "gap-x-1",
    "xs": "gap-x-1.5",
    "sm": "gap-x-2",
    "md": "gap-x-2",
    "lg": "gap-x-2",
    "xl": "gap-x-2"
  },
  "padding": {
    "2xs": "px-2 py-1",
    "xs": "px-2.5 py-1.5",
    "sm": "px-3 py-1.5",
    "md": "px-3 py-2",
    "lg": "px-4 py-2",
    "xl": "px-4 py-3"
  },
  "leading": {
    "padding": {
      "2xs": "pl-[26px]",
      "xs": "pl-8",
      "sm": "pl-9",
      "md": "pl-10",
      "lg": "pl-11",
      "xl": "pl-12"
    }
  },
  "trailing": {
    "padding": {
      "2xs": "pr-[26px]",
      "xs": "pr-8",
      "sm": "pr-9",
      "md": "pr-10",
      "lg": "pr-11",
      "xl": "pr-12"
    }
  },
  "color": {
    "white": {
      "outline": "shadow-sm bg-white dark:bg-gray-900 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400"
    },
    "gray": {
      "outline": "shadow-sm bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-400"
    }
  },
  "variant": {
    "outline": "shadow-sm bg-transparent text-gray-900 dark:text-white ring-1 ring-inset ring-{color}-500 dark:ring-{color}-400 focus:ring-2 focus:ring-{color}-500 dark:focus:ring-{color}-400",
    "none": "bg-transparent focus:ring-0 focus:shadow-none"
  },
  "icon": {
    "base": "flex-shrink-0 text-gray-400 dark:text-gray-500",
    "color": "text-{color}-500 dark:text-{color}-400",
    "size": {
      "2xs": "h-3.5 w-3.5",
      "xs": "h-4 w-4",
      "sm": "h-4 w-4",
      "md": "h-5 w-5",
      "lg": "h-5 w-5",
      "xl": "h-6 w-6"
    },
    "leading": {
      "wrapper": "absolute inset-y-0 left-0 flex items-center pointer-events-none",
      "padding": {
        "2xs": "pl-2",
        "xs": "pl-2.5",
        "sm": "pl-3",
        "md": "pl-3",
        "lg": "pl-4",
        "xl": "pl-4"
      }
    },
    "trailing": {
      "wrapper": "absolute inset-y-0 right-0 flex items-center pointer-events-none",
      "padding": {
        "2xs": "pr-2",
        "xs": "pr-2.5",
        "sm": "pr-3",
        "md": "pr-3",
        "lg": "pr-4",
        "xl": "pr-4"
      }
    }
  },
  "default": {
    "size": "sm",
    "color": "white",
    "variant": "outline",
    "loadingIcon": "i-heroicons-arrow-path-20-solid"
  }
}