Vue Input group

Vue Input group component

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

Basic example

Place one add-on or button inside MDBInput<>'s default or #prepend slot. You may also place one on both sides of an input

@
@example.com
https://example.com/users/
$ .00
@
With textarea 
<template>
  <MDBRow tag="form" class="g-3">
    <MDBInput
      inputGroup
      :formOutline="false"
      v-model="input1"
      aria-describedby="basic-addon1"
      aria-label="Username"
      placeholder="Username"
    >
      <template #prepend>
        <span class="input-group-text" id="basic-addon1">@</span>
      </template>
    </MDBInput>
    <MDBInput
      inputGroup
      :formOutline="false"
      v-model="input2"
      aria-describedby="basic-addon2"
      aria-label="Recipient's username"
      placeholder="Recipient's username"
    >
      <span class="input-group-text" id="basic-addon2">@example.com</span>
    </MDBInput>
    <label for="basic-url" class="form-label">Your vanity URL</label>
    <MDBInput
      inputGroup
      :formOutline="false"
      v-model="input3"
      id="basic-url"
      aria-describedby="basic-addon3"
    >
      <template #prepend>
        <span class="input-group-text" id="basic-addon3">https://example.com/users/</span>
      </template>
    </MDBInput>
    <MDBInput
      inputGroup
      :formOutline="false"
      v-model="input4"
      aria-label="Amount (to the nearest dollar)"
    >
      <template #prepend>
        <span class="input-group-text">$</span>
      </template>
      <span class="input-group-text">.00</span>
    </MDBInput>
    <MDBInput
      inputGroup
      :formOutline="false"
      v-model="input5"
      placeholder="Username"
      aria-label="Username"
    >
      <span class="input-group-text">@</span>
      <MDBInput :wrap="false" v-model="input6" placeholder="Server" aria-label="Server" />
    </MDBInput>
    <MDBTextarea
      inputGroup
      :formOutline="false"
      v-model="textarea1"
      aria-label="With textarea"
    >
      <template #prepend>
        <span class="input-group-text">With textarea</span>
      </template>
    </MDBTextarea>
  </MDBRow>
</template>
<script>
  import { MDBInput, MDBTextarea, MDBRow } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  export default {
    components: {
      MDBInput,
      MDBTextarea,
      MDBRow,
    },
    setup() {
      const input1 = ref('');
      const input2 = ref('');
      const input3 = ref('');
      const input4 = ref('');
      const input5 = ref('');
      const input6 = ref('');
      const textarea1 = ref('');

      return {
        input1,
        input2,
        input3,
        input4,
        input5,
        input6,
        textarea1,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBInput, MDBTextarea, MDBRow } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const input1 = ref('');
  const input2 = ref('');
  const input3 = ref('');
  const input4 = ref('');
  const input5 = ref('');
  const input6 = ref('');
  const textarea1 = ref('');
</script>

Wrapping

Input groups wrap by default via flex-wrap: wrap in order to accommodate custom form field validation within an input group. You may disable this with adding flex-nowrap to wrapperClass property.

@ 
<template>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="flex-nowrap"
    v-model="input8"
    aria-describedby="addon-wrapping"
    aria-label="Username"
    placeholder="Username"
  >
    <template #prepend>
      <span class="input-group-text" id="addon-wrapping">@</span>
    </template>
  </MDBInput>
</template>
<script>
  import { MDBInput } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  export default {
    components: {
      MDBInput,
    },
    setup() {
      const input8 = ref('');

      return {
        input8,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBInput } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const input8 = ref('');
</script>

Sizing

Add the relative form sizing value to the inputGroup property and contents within will automatically resize — no need for repeating the form control size properties on each element.

Sizing on the individual input group elements isn’t supported.
Small
Default
Large 
<template>
  <MDBInput
    inputGroup="sm"
    :formOutline="false"
    wrapperClass="mb-3"
    v-model="input9"
    aria-describedby="inputGroup-sizing-sm"
    aria-label="Sizing example input"
    placeholder="Sizing example input"
  >
    <template #prepend>
      <span class="input-group-text" id="inputGroup-sizing-sm">Small</span>
    </template>
  </MDBInput>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    v-model="input10"
    aria-describedby="inputGroup-sizing-default"
    aria-label="Sizing example input"
    placeholder="Sizing example input"
  >
    <template #prepend>
      <span class="input-group-text" id="inputGroup-sizing-default">Default</span>
    </template>
  </MDBInput>
  <MDBInput
    inputGroup="lg"
    :formOutline="false"
    wrapperClass="mb-3"
    v-model="input11"
    aria-describedby="inputGroup-sizing-lg"
    aria-label="Sizing example input"
    placeholder="Sizing example input"
  >
    <template #prepend>
      <span class="input-group-text" id="inputGroup-sizing-lg">Large</span>
    </template>
  </MDBInput>
</template>
<script>
  import { MDBInput } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  export default {
    components: {
      MDBInput,
    },
    setup() {
      const input9 = ref('');
      const input10 = ref('');
      const input11 = ref('');

      return {
        input9,
        input10,
        input11,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBInput } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const input9 = ref('');
  const input10 = ref('');
  const input11 = ref('');
</script>

No border

Add .border-0 class to the .input-group-text to remove the border.

@
@example.com
https://example.com/users/
$ .00
With textarea 
<template>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    class="rounded"
    v-model="input12"
    aria-describedby="search-addon"
    aria-label="Search"
    placeholder="Search"
  >
    <template #prepend>
      <span class="input-group-text border-0" id="search-addon">@</span>
    </template>
  </MDBInput>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    class="rounded"
    v-model="input13"
    aria-describedby="basic-addon4"
    aria-label="Username"
    placeholder="Username"
  >
    <template #prepend>
      <span class="input-group-text border-0" id="basic-addon1">@</span>
    </template>
  </MDBInput>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    class="rounded"
    v-model="input14"
    aria-describedby="basic-addon5"
    aria-label="Recipient's username"
    placeholder="Recipient's username"
  >
    <span class="input-group-text border-0" id="basic-addon2">@example.com</span>
  </MDBInput>
  <label for="basic-url2" class="form-label">Your vanity URL</label>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    class="rounded"
    v-model="input15"
    id="basic-url2"
    aria-describedby="basic-addon6"
  >
    <template #prepend>
      <span class="input-group-text border-0" id="basic-addon3">
        https://example.com/users/
      </span>
    </template>
  </MDBInput>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    class="rounded"
    v-model="input16"
    aria-label="Amount (to the nearest dollar)"
  >
    <template #prepend>
      <span class="input-group-text border-0">$</span>
    </template>
    <span class="input-group-text border-0">.00</span>
  </MDBInput>
  <MDBTextarea
    inputGroup
    :formOutline="false"
    class="rounded"
    v-model="textarea2"
    aria-label="With textarea"
  >
    <template #prepend>
      <span class="input-group-text border-0">With textarea</span>
    </template>
  </MDBTextarea>
</template>
<script>
  import { MDBInput, MDBTextarea } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  export default {
    components: {
      MDBInput,
      MDBTextarea,
    },
    setup() {
      const input12 = ref('');
      const input13 = ref('');
      const input14 = ref('');
      const input15 = ref('');
      const input16 = ref('');
      const textarea2 = ref('');

      return {
        input12,
        input13,
        input14,
        input15,
        input16,
        textarea2,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBInput, MDBTextarea } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const input12 = ref('');
  const input13 = ref('');
  const input14 = ref('');
  const input15 = ref('');
  const input16 = ref('');
  const textarea2 = ref('');
</script>

Checkboxes and radios

Place any checkbox or radio option within an input group’s addon instead of text.

<template>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    v-model="input17"
    aria-label="Checkbox for following text input"
  >
    <template #prepend>
      <span class="input-group-text">
        <MDBCheckbox
          aria-label="Text input with checkbox"
          v-model="checkbox1"
          :wrap="false"
          class="mt-0"
        />
      </span>
    </template>
  </MDBInput>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    v-model="input18"
    aria-label="Radio button for following text input"
  >
    <template #prepend>
      <span class="input-group-text">
        <MDBRadio
          aria-label="Text input with radio button"
          name="flexRadioDefault"
          v-model="radio1"
          :wrap="false"
          class="mt-0"
        />
      </span>
    </template>
  </MDBInput>
</template>
<script>
  import { MDBInput, MDBCheckbox, MDBRadio } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  export default {
    components: {
      MDBInput,
      MDBCheckbox,
      MDBRadio,
    },
    setup() {
      const input17 = ref('');
      const input18 = ref('');
      const checkbox1 = ref(false);
      const radio1 = ref('');

      return {
        input17,
        input18,
        checkbox1,
        radio1,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBInput, MDBCheckbox, MDBRadio } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const input17 = ref('');
  const input18 = ref('');
  const checkbox1 = ref(false);
  const radio1 = ref('');
</script>

Multiple inputs

While multiple <input>s are supported visually, validation styles are only available for input groups with a single <input>. Add :wrap="false" to a nested input element.

First and last name 
<template>
  <MDBInput
    inputGroup
    :formOutline="false"
    v-model="input19"
    aria-label="First name"
  >
    <template v-slot:prepend>
      <span class="input-group-text">First and last name</span>
      <MDBInput
        :wrap="false"
        v-model="input20"
        :formOutline="false"
        aria-label="First name">
        <template v-slot:prepend>
          <span class="input-group-text">First and last name</span>
        </template>
      </MDBInput>
    </template>
  </MDBInput>
</template>
<script>
  import { MDBInput } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  export default {
    components: {
      MDBInput,
    },
    setup() {
      const input19 = ref('');
      const input20 = ref('');

      return {
        input19,
        input20,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBInput } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const input19 = ref('');
  const input20 = ref('');
</script>

Multiple addons

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

$ 0.00
$ 0.00 
<template>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    v-model="input21"
    aria-label="Dollar amount (with dot and two decimal places)"
  >
    <template #prepend>
      <span class="input-group-text">$</span>
      <span class="input-group-text">0.00</span>
    </template>
  </MDBInput>
  <MDBInput
    inputGroup
    :formOutline="false"
    v-model="input22"
    aria-label="Dollar amount (with dot and two decimal places)"
  >
    <span class="input-group-text">$</span>
    <span class="input-group-text">0.00</span>
  </MDBInput>
</template>
<script>
  import { MDBInput } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  export default {
    components: {
      MDBInput,
    },
    setup() {
      const input21 = ref('');
      const input22 = ref('');

      return {
        input21,
        input22,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBInput } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const input21 = ref('');
  const input22 = ref('');
</script>

Button addons

<template>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    v-model="input23"
    aria-label="Example text with button addon"
    aria-describedby="button-addon1"
  >
    <template #prepend>
      <MDBBtn outline="primary" id="button-addon1" :ripple="{ color: 'dark' }">
        Button
      </MDBBtn>
    </template>
  </MDBInput>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    v-model="input24"
    placeholder="Recipient's username"
    aria-label="Recipient's username"
    aria-describedby="button-addon2"
  >
    <MDBBtn outline="primary" id="button-addon2" :ripple="{ color: 'dark' }">
      Button
    </MDBBtn>
  </MDBInput>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    v-model="input25"
    aria-label="Example text with two button addons"
  >
    <template #prepend>
      <MDBBtn outline="primary" :ripple="{ color: 'dark' }"> Button </MDBBtn>
      <MDBBtn outline="primary" :ripple="{ color: 'dark' }"> Button </MDBBtn>
    </template>
  </MDBInput>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    v-model="input26"
    placeholder="Recipient's username"
    aria-label="Recipient's username"
  >
    <MDBBtn outline="primary" :ripple="{ color: 'dark' }"> Button </MDBBtn>
    <MDBBtn outline="primary" :ripple="{ color: 'dark' }"> Button </MDBBtn>
  </MDBInput>
</template>
<script>
  import { MDBInput, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  export default {
    components: {
      MDBInput,
      MDBBtn,
    },
    setup() {
      const input23 = ref('');
      const input24 = ref('');
      const input25 = ref('');
      const input26 = ref('');

      return {
        input23,
        input24,
        input25,
        input26,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBInput, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const input23 = ref('');
  const input24 = ref('');
  const input25 = ref('');
  const input26 = ref('');
</script>

Buttons with dropdowns

<template>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    v-model="input27"
    aria-label="Text input with dropdown button"
  >
    <template #prepend>
      <MDBDropdown v-model="dropdown1">
        <MDBDropdownToggle @click="dropdown1 = !dropdown1">Dropdown</MDBDropdownToggle>
        <MDBDropdownMenu>
          <MDBDropdownItem href="#">Action</MDBDropdownItem>
          <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
          <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
          <MDBDropdownItem divider />
          <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
        </MDBDropdownMenu>
      </MDBDropdown>
    </template>
  </MDBInput>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    v-model="input28"
    aria-label="Text input with dropdown button"
  >
    <MDBDropdown v-model="dropdown2">
      <MDBDropdownToggle @click="dropdown2 = !dropdown2">Dropdown</MDBDropdownToggle>
      <MDBDropdownMenu>
        <MDBDropdownItem href="#">Action</MDBDropdownItem>
        <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
        <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
        <MDBDropdownItem divider />
        <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
      </MDBDropdownMenu>
    </MDBDropdown>
  </MDBInput>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    v-model="input29"
    aria-label="Text input with 2 dropdown buttons"
  >
    <MDBDropdown v-model="dropdown3">
      <MDBDropdownToggle @click="dropdown3 = !dropdown3">Dropdown</MDBDropdownToggle>
      <MDBDropdownMenu>
        <MDBDropdownItem href="#">Action</MDBDropdownItem>
        <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
        <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
        <MDBDropdownItem divider />
        <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
      </MDBDropdownMenu>
    </MDBDropdown>
    <template #prepend>
      <MDBDropdown v-model="dropdown4">
        <MDBDropdownToggle @click="dropdown4 = !dropdown4">Dropdown</MDBDropdownToggle>
        <MDBDropdownMenu>
          <MDBDropdownItem href="#">Action</MDBDropdownItem>
          <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
          <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
          <MDBDropdownItem divider />
          <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
        </MDBDropdownMenu>
      </MDBDropdown>
    </template>
  </MDBInput>
</template>
<script>
  import {
    MDBInput,
    MDBDropdown,
    MDBDropdownMenu,
    MDBDropdownToggle,
    MDBDropdownItem,
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  export default {
    components: {
      MDBInput,
      MDBDropdown,
      MDBDropdownMenu,
      MDBDropdownToggle,
      MDBDropdownItem,
    },
    setup() {
      const input27 = ref('');
      const input28 = ref('');
      const input29 = ref('');
      const dropdown1 = ref(false);
      const dropdown2 = ref(false);
      const dropdown3 = ref(false);
      const dropdown4 = ref(false);

      return {
        input27,
        input28,
        input29,
        dropdown1,
        dropdown2,
        dropdown3,
        dropdown4,
      };
    },
  };
</script>
<script setup lang="ts">
  import {
    MDBInput,
    MDBDropdown,
    MDBDropdownMenu,
    MDBDropdownToggle,
    MDBDropdownItem,
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const input27 = ref('');
  const input28 = ref('');
  const input29 = ref('');
  const dropdown1 = ref(false);
  const dropdown2 = ref(false);
  const dropdown3 = ref(false);
  const dropdown4 = ref(false);
</script>

Segmented buttons

<template>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    v-model="input30"
    aria-label="Text input with segmented dropdown button"
  >
    <template #prepend>
      <MDBDropdown btnGroup v-model="dropdown5">
        <MDBBtn outline="primary">Action</MDBBtn>
        <MDBDropdownToggle outline="primary" split @click="dropdown5 = !dropdown5" />
        <MDBDropdownMenu>
          <MDBDropdownItem href="#">Action</MDBDropdownItem>
          <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
          <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
          <MDBDropdownItem divider />
          <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
        </MDBDropdownMenu>
      </MDBDropdown>
    </template>
  </MDBInput>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    v-model="input31"
    aria-label="Text input with segmented dropdown button"
  >
    <MDBDropdown btnGroup v-model="dropdown6" align="end">
      <MDBBtn outline="primary">Action</MDBBtn>
      <MDBDropdownToggle outline="primary" split @click="dropdown6 = !dropdown6" />
      <MDBDropdownMenu>
        <MDBDropdownItem href="#">Action</MDBDropdownItem>
        <MDBDropdownItem href="#">Another Action</MDBDropdownItem>
        <MDBDropdownItem href="#">Something else here</MDBDropdownItem>
        <MDBDropdownItem divider />
        <MDBDropdownItem href="#">Separated link</MDBDropdownItem>
      </MDBDropdownMenu>
    </MDBDropdown>
  </MDBInput>
</template>
<script>
  import {
    MDBInput,
    MDBDropdown,
    MDBDropdownMenu,
    MDBDropdownToggle,
    MDBDropdownItem,
    MDBBtn,
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  export default {
    components: {
      MDBInput,
      MDBDropdown,
      MDBDropdownMenu,
      MDBDropdownToggle,
      MDBDropdownItem,
      MDBBtn,
    },
    setup() {
      const input30 = ref('');
      const input31 = ref('');
      const dropdown5 = ref(false);
      const dropdown6 = ref(false);

      return {
        input30,
        input31,
        dropdown5,
        dropdown6,
      };
    },
  };
</script>
<script setup lang="ts">
  import {
    MDBInput,
    MDBDropdown,
    MDBDropdownMenu,
    MDBDropdownToggle,
    MDBDropdownItem,
    MDBBtn,
  } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const input30 = ref('');
  const input31 = ref('');
  const dropdown5 = ref(false);
  const dropdown6 = ref(false);
</script>

File input

<template>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    v-model="input32"
    type="file"
    id="inputGroupFile01"
    aria-label="Upload"
  >
    <template v-slot:prepend>
      <label class="input-group-text" for="inputGroupFile01">Upload</label>
    </template>
  </MDBInput>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    v-model="input33"
    type="file"
    id="inputGroupFile02"
    aria-label="Upload"
  >
    <label class="input-group-text" for="inputGroupFile02">Upload</label>
  </MDBInput>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    v-model="input34"
    type="file"
    id="inputGroupFile03"
    aria-describedby="inputGroupFileAddon03"
    aria-label="Upload"
  >
    <template v-slot:prepend>
      <MDBBtn outline="secondary" id="inputGroupFileAddon03"> Button </MDBBtn>
    </template>
  </MDBInput>
  <MDBInput
    inputGroup
    :formOutline="false"
    wrapperClass="mb-3"
    v-model="input35"
    type="file"
    id="inputGroupFile04"
    aria-describedby="inputGroupFileAddon04"
    aria-label="Upload"
  >
    <MDBBtn outline="secondary" id="inputGroupFileAddon04"> Button </MDBBtn>
  </MDBInput>
</template>
<script>
  import { MDBInput, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  export default {
    components: {
      MDBInput,
      MDBBtn,
    },
    setup() {
      const input32 = ref('');
      const input33 = ref('');
      const input34 = ref('');
      const input35 = ref('');

      return {
        input32,
        input33,
        input34,
        input35,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBInput, MDBBtn } from 'mdb-vue-ui-kit';
  import { ref } from 'vue';

  const input32 = ref('');
  const input33 = ref('');
  const input34 = ref('');
  const input35 = ref('');
</script>

Accessibility

Screen readers will have trouble with your forms if you don’t include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.

The exact technique to be used (<label> elements hidden using the .visually-hidden class, or use of the aria-label and aria-labelledby attributes, possibly in combination with aria-describedby) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you’re implementing. The examples in this section provide a few suggested, case-specific approaches.