3.7 KiB

Raw Blame History

import Input from "~/components/ui/Input.vue"

Input

Inputs are areas in which users can enter a single-line text or a number. Several presets are available.

Prop	Data type	Required?	Description
`placeholder`	String	No	The placeholder text that appears when the input is empty.
`icon`	String	No	The Bootstrap icon to show on the input.
`v-model`	String	Yes	The text entered in the input.

Link a user's input to form data by referencing the data in a v-model of type string.

const value = ref("Preset Value");

<Input v-model="value" placeholder="Your favorite animal" />

Input icons

Add a Bootstrap icon to an input to make its purpose more visually clear.

<Input v-model="value" icon="bi-search" />

Label slot

<Input v-model="user">
  <template #label>
    User name
  </template>
</Input>

User name

If you just have a string, we have a convenience prop, so instead you can write:

<Input v-model="user" label="User name" />

Input-right slot

You can add a template on the right-hand side of the input to guide the user's input.

<Input v-model="value" placeholder="Search">
  <template #input-right>
    suffix
  </template>
</Input>

suffix

Color

See Button for a detailed overview of available props.

Presets

Search

<Input search v-model="search" />

Password

<Spacer :size="64" />
<Layout form stack>
  <Input v-model="user" label="User name" />
  <Input password v-model="password" label="Password" />
  <Layout flex>
    <Button primary> Submit </Button>
    <Button> Cancel </Button>
  </Layout>
</Layout>

Submit Cancel

::: tip

We use the spacer to simulate the baseline alignment on page layouts (64px between sections)

:::

Add a reset option

<Input
  v-model="value"
  :reset="() => { value = 'Original value' }">
</Input>

Fallthrough attributes

If you add attributes that are no props, they will be added to the component:

<Input v-model="password" required
  field-id="password-field"
/>

3.7 KiB Raw Blame History