Tile UI Vue
Source code

Components

InputGroup

Composable input group primitives.

Use InputGroup to attach addons, buttons, and text to an input.

https://
import { InputGroup, InputGroupAddon, InputGroupInput } from '@tile-ui/vue';
 
export default function InputGroupDemo() {
	return (
		<InputGroup>
			<InputGroupAddon>https://</InputGroupAddon>

Registry install

pnpm dlx shadcn@latest add @tile-ui/input-group

Package usage

import { InputGroup, InputGroupAddon, InputGroupInput } from '@tile-ui/vue';
 
<InputGroup>
	<InputGroupAddon>https://</InputGroupAddon>
	<InputGroupInput placeholder="example.com" />
</InputGroup>

Highlights

  • Addon, button, and text
  • Input and textarea
  • Addon alignment

Registry dependencies

Item Purpose
input-group Component source and module styles
core Framework-agnostic logic helpers
styles Shared SCSS tokens and globals

API reference

InputGroup

Prop Type Default
variant 'default' | 'outline' —

InputGroupAddon

Prop Type Default
variant 'default' | 'outline' —
align 'inline-start' | 'inline-end' | 'block-start' | 'block-end' —

InputGroupButton

No custom props.

InputGroupText

No custom props.

InputGroupInput

No custom props.

InputGroupTextarea

No custom props.

PreviousInputNextInputOtp