Input Group

Combine multiple input in singleline.

Usage

Simple Usage

preview

<template>
  <p-input-group>
    <p-input />
    <p-button variant="input">
      Submit
    </p-button>
  </p-input-group>
</template>

With Addon

preview

<template>
  <p-input-group>
    <p-input-group-addon>
      <IconEmail />
    </p-input-group-addon>
    <p-input />
  </p-input-group>
</template>

With Addon and Divider

preview

<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

<template>
  <p-input-group>
    <p-select :options="['A', 'B', 'C']" />
    <p-input />
  </p-input-group>
</template>

Multiple Input

preview

<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

<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

<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

<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

See Also