# Textbox

Allows entering text

# Usage

<template>
  <winui-textbox placeholder="Enter text here" />
</template>

# Props

Tip

The Textbox component inherits all attributes and events from <input> (opens new window), or if type is textarea, inherits from <textarea> (opens new window)

# `type` optional

Type: string
Default: text

The type of the textbox.

# `value` optional

Type: string
Default: undefined

The initial value of the textbox.

# Customization

Use the class name .winui-textbox to override/customize the component's styles.

# Examples

# Different types

<template>
  <div>
    <winui-textbox type="password" placeholder="Password" required />
    <winui-textbox type="email" placeholder="Email" />
    <winui-textbox type="number" placeholder="Number" />
    <winui-textbox type="textarea" value="Textarea" rows="5" />
  </div>
</template>

<style lang="stylus" scoped>
.winui-textbox {
  display: block;
  margin-bottom: 8px;
  min-width: 300px;
}
</style>

# Handling two-way binding

Your email address:

<template>
  <div>
    <winui-textbox
      type="email"
      placeholder="Enter email address"
      v-model="email"
    />
    <div>Your email address: {{ email }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: "",
    };
  },
};
</script>

← Tabs Treeview →