BnInput ​

BnInput is a wrapper for <input> elements.

Basic Usage ​

The only required prop for BnInput is name. The name prop is used to identify the input in the context of a Form or an useForm, or when submitting a form in the traditional way.

<bn-input v-model="input" name="name" />

Input Attributes ​

The BnInput component accepts all the attributes that a native <input> element accepts, such as disabled and multiple.

<bn-input name="disabled" disabled placeholder="Disabled">
<bn-input name="number" type="number" placeholder="Number" readonly>
<bn-input name="password" type="password" placeholder="Password">

Vee-Validate ​

BnInput works with vee-validate out of the box.

<script setup lang="ts">
import { Form } from 'vee-validate';
import isRequired from '../rules';

const validationSchema = {
  input: isRequired,
};
</script>

<template>
  <Form :validation-schema="validationSchema">
    <bn-input
      name="input"
      placeholder="Click on me and then click out"
    />
  </Form>
</template>

Rules ​

If you want to validate a field without being in the context of a Form or an useForm, you can use the rules prop.

<script setup lang="ts">
import isRequired from '../rules';
</script>

<template>
  <bn-input
    v-model="validate"
    name="input"
    :rules="isRequired"
    placeholder="Click on me and then click out"
  />
</template>

Color ​

You can change the color accent of the input using the color prop.

<bn-input name="input" color="lime" placeholder="Click on me" />

Slots ​

BnInput provides five slots: prefix, suffix, icon-left, icon-right and bottom for adding additional content to the input.

prefix ​

The prefix slot is used to add content before the input, in a div with different styling than the input itself. Useful for adding a country code to a phone number input or a currency symbol to a price input.

<bn-input
  v-model="phoneNumber"
  name="phone-number"
>
  <template #prefix>
	+56 9
  </template>
</bn-input>

suffix ​

The suffix slot is used to add content after the input, in a div with different style than the input itself. Useful for adding a domain to an email input or a unit of measurement to a quantity input.

<bn-input
  v-model="email"
  name="email"
>
  <template #suffix>
	@gmail.com
  </template>
</bn-input>

icon-left ​

The icon-left slot is used to add an icon or small content before the input but inside the input container. Useful for adding a letter icon to an email input or a lock icon to a password input.

<bn-input
  v-model="email"
  name="email"
>
  <template #icon-left>
    <svg>
      <path
        fill="currentColor"
        :d="letterIcon"
      >
    </svg>
  </template>
</bn-input>

icon-right ​

The icon-right slot is used to add an icon or small content after the input but inside the input container. Useful for adding a letter icon to an email input or a lock icon to a password input.

<bn-input
  v-model="email"
  name="email"
>
  <template #icon-right>
    <svg
      viewBox="0 0 24 24"
      class="h-4 w-4 text-gray-400"
    >
      <path
        fill="currentColor"
        :d="letterIcon"
      />
    </svg>
  </template>
</bn-input>

bottom ​

The bottom slot is used to add content below the input. Useful for hints or errors. Includes the following slot props:

• errorMessage: vee-validate property, if the input is invalid
• valid: vee-validate meta property
• touched: vee-validate meta property

<bn-input
  v-model="email"
  name="email"
  :rules="isRequired"
>
  <template #bottom="{ errorMessage, valid, touched }">
    <span
      class="mt-1 text-sm"
      :class="!valid && touched ? 'text-rose-700' : 'text-gray-500'"
    >
      {{ !valid && touched ? errorMessage : "We'll never share your email with anyone else." }}
    </span>
  </template>
</bn-input>

Customization ​

There are two ways to customize the appearance of the bn-input component:

classes prop ​

Every component has a classes prop that will accept an object where each key corresponds to an internal element of the component. The value of each key will be the classes that will be applied to that element. For the values, you can use strings, objects or arrays, the same way it works with Vue's class binding.

<template>
  <bn-input name="complex" :classes="{ prefix: 'bg-red-300 text-white' }">
    <slot #prefix>Hello</slot>
  </bn-input>
</template>

Default styles will still be applied, but the classes you provide will take precedence, so you can use this to override any existing style.

The available keys for this component are:

• input: The <input> element
• prefix: The element surrounding the prefix slot
• suffix: The element surrounding the suffix slot

Theming ​

You can change the default appearance or even add variants by editing the configuration of the TailwindCSS plugin.

plugins: [
    require('@tailwindcss/forms'),
    require('@headlessui/tailwindcss'),
    banano.tailwindPlugin({
      theme: {
        bn-input: {
          '.bn-input': {
            '@apply bg-white relative w-full': {},
          }
        }
      }
    }),
  ],

You can find more information about customizing the library in Theme Customization.

API Reference ​

Props ​

Events ​

This component does not emit any custom events, but it emits all the events from the underlying <input> element.

Slots ​