Components / Forms

Input Group

Compose a native input with attached actions and shared focus styling.

Preview

Install

Run in your project

npx @getweini/cli@latest add input-group

Use cases

Copyable URL

Put a separate copy action beside a read-only URL.

Search action

Attach a submit button while leaving the input editable and native.

Usage example

Vue

<script setup lang="ts">
import { ref } from 'vue'
import InputGroup from './components/ui/input-group/InputGroup.vue'
import Input from './components/ui/input/Input.vue'
import Button from './components/ui/button/Button.vue'
const url = ref('https://weini.app/project')
function copyUrl() { navigator.clipboard.writeText(url.value) }
</script>
<template>
  <InputGroup>
    <Input v-model="url" aria-label="Share URL" />
    <template #end><Button variant="ghost" size="sm" @click="copyUrl">Copy</Button></template>
  </InputGroup>
</template>

More examples

Share URL

The action has its own keyboard stop and name.

Share URL

<script setup lang="ts">
import { ref } from 'vue'
import InputGroup from './components/ui/input-group/InputGroup.vue'
import Input from './components/ui/input/Input.vue'
import Button from './components/ui/button/Button.vue'
const url = ref('https://weini.app/team')
function copyUrl() { void navigator.clipboard.writeText(url.value) }
</script>
<template>
  <InputGroup>
    <Input v-model="url" aria-label="Share URL" readonly />
    <template #end><Button type="button" variant="ghost" size="sm" @click="copyUrl">Copy</Button></template>
  </InputGroup>
</template>

Search with submit

Keep native form submission on the attached button.

Search with submit

<script setup lang="ts">
import { ref } from 'vue'
import InputGroup from './components/ui/input-group/InputGroup.vue'
import Input from './components/ui/input/Input.vue'
import Button from './components/ui/button/Button.vue'
const query = ref('')
</script>
<template>
  <form action="/search">
    <label for="query">Search</label>
    <InputGroup size="md">
      <Input id="query" v-model="query" name="q" size="md" />
      <template #end><Button type="submit" size="sm">Go</Button></template>
    </InputGroup>
  </form>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Input Group
Name	Type	Default or requirement
`default`	Input or Textarea slot	required
`#start / #end`	addon slots	optional
`size`	sm \| md \| lg	md
`invalid / disabled`	boolean	false

The inner control retains its native attributes and Field relationship. Actions are separate tab stops; give icon-only actions accessible labels.

Implementation notes

Match the group and inner control size. Set disabled or invalid on both when they share that state.
The start and end slots may contain actions; each action remains independently focusable.

Accessibility and localization

Name the input and every attached action separately. Avoid putting an unlabeled icon button beside the field.