# Input Group Text

## Usage

A prefix or suffix text element rendered inside InputGroup. Displays text or icons.

Put it in the `before` or `after` slot of `InputGroup` to show a unit, a currency symbol, a protocol, or a fixed domain around the input. The text is not editable and is skipped by Tab, so it never gets in the way of typing.

```vue
<script setup lang="ts">
import { InputGroup, InputGroupText } from '@astryx-vue/core/InputGroup'
import { TextInput } from '@astryx-vue/core/TextInput'
import { ref } from 'vue'

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

<template>
  <InputGroup label="Price">
    <template #before>
      <InputGroupText>$</InputGroupText>
    </template>
    <TextInput v-model="price" label="Amount" is-label-hidden placeholder="0.00" />
    <template #after>
      <InputGroupText>USD</InputGroupText>
    </template>
  </InputGroup>
</template>
```

The default slot holds the text. An icon works too, since the slot accepts any markup; keep it decorative, because the group's `label` is what names the control for a screen reader.

```ts
import { InputGroupText } from '@astryx-vue/core/InputGroup'
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` | — | `id` for the text element. Useful when you need to target the prefix or suffix from a test or from `aria-describedby`. |

## Slots

- `default`: the text or icon to show. Rendered as-is inside the text element.

## Native attributes

The component renders a `<span>`. Attributes that are not props land on that span, so `class` and `style` style the prefix or suffix itself.