PersonaInput Group
Combine multiple input in singleline.
Usage
Simple Usage
preview
vue
<template>
<p-input-group>
<p-input />
<p-button variant="input">
Submit
</p-button>
</p-input-group>
</template>With Addon
preview
vue
<template>
<p-input-group>
<p-input-group-addon>
<IconEmail />
</p-input-group-addon>
<p-input />
</p-input-group>
</template>With Addon and Divider
preview
vue
<template>
<p-input-group>
<p-input-group-addon>
<IconEmail />
</p-input-group-addon>
<p-divider vertical />
<p-input />
<p-button variant="input">
Submit
</p-button>
</p-input-group>
</template>Input and Select
vue
<template>
<p-input-group>
<p-select :options="['A', 'B', 'C']" />
<p-input />
</p-input-group>
</template>Multiple Input
preview
vue
<template>
<p-input-group>
<p-input />
<p-divider vertical />
<p-input />
<p-divider vertical />
<p-input />
</p-input-group>
</template>Sizing
Input Group also has 4 variants size: xs, sm, md, lg, default is md.
preview
vue
<template>
<p-input-group size="xs">
<p-input />
<p-button variant="input">
Submit
</p-button>
</p-input-group>
<p-input-group size="sm">
<p-input />
<p-button variant="input">
Submit
</p-button>
</p-input-group>
<p-input-group size="md">
<p-input />
<p-button variant="input">
Submit
</p-button>
</p-input-group>
<p-input-group size="lg">
<p-input />
<p-button variant="input">
Submit
</p-button>
</p-input-group>
</template>Disabled State
Adding prop disabled to Input Group to unified input into disabled state
preview
vue
<template>
<p-input-group disabled>
<p-input-group-addon>
<IconEmail />
</p-input-group-addon>
<p-divider vertical />
<p-input />
<p-button variant="input">
Submit
</p-button>
</p-input-group>
</template>Error State
Adding prop error to Input Group to unified input into error state
preview
vue
<template>
<p-input-group error>
<p-input-group-addon>
<IconEmail />
</p-input-group-addon>
<p-divider vertical />
<p-input />
<p-button variant="input">
Submit
</p-button>
</p-input-group>
</template>API
Props
| Props | Type | Default | Description |
|---|---|---|---|
size | String | md | Input size variant, valid value: xs, sm, md, lg |
disabled | Boolean | false | Disabled state |
readonly | Boolean | false | Readonly state |
error | Boolean | false | Error state |
Slots
| Name | Description |
|---|---|
default | Content to place a form input |
Events
| Name | Arguments | Description |
|---|---|---|
| There no props here | ||