Skip to content
On this page

Input 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

preview
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

PropsTypeDefaultDescription
sizeStringmdInput size variant, valid value: xs, sm, md, lg
disabledBooleanfalseDisabled state
readonlyBooleanfalseReadonly state
errorBooleanfalseError state

Slots

NameDescription
defaultContent to place a form input

Events

NameArgumentsDescription
There no props here

See Also

Released under the MIT License.