Vuetify — Text Fields

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Text Field

We can add text fields to accept user input.

For example, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-text-field label="Regular" single-line></v-text-field>  
      </v-col>  
      <v-col col="12">  
        <v-text-field label="Solo" single-line solo></v-text-field>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

We have the single-line prop to make the text field display as a single line.

The solo prop makes the input display as the box.

There’s also the outlined prop to display an input with an outline.

Shaped Text Input

The shaped text fields are rounded if the outlined prop is applied.

For example, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-text-field v-model="first" label="First Name" outlined shaped></v-text-field>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    first: "",  
  }),  
};  
</script>

The outlined and shaped props together will make the text field displayed with the top 2 corners rounded.

Disabled and Readonly Text Fields

Text fields can also be disabled and readonly .

For example, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-text-field v-model="first" label="First Name" disabled></v-text-field>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    first: "",  
  }),  
};  
</script>

or:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-text-field v-model="first" label="First Name" readonly></v-text-field>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    first: "",  
  }),  
};  
</script>

Both props make the input inactive.

But readonly won’t change the styles.

Dense

The dense prop makes the text input shorter than the default size.

So we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-text-field dense label="Regular"></v-text-field>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({  
    first: "",  
  }),  
};  
</script>

Icons

We can add icons with the prepend-icon , append-icon , and append-outer-icon props.

For instance, we can write:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-text-field label="Prepend" prepend-icon="mdi-map-marker"></v-text-field>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

or:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-text-field label="Append" append-icon="mdi-map-marker"></v-text-field>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

or:

<template>  
  <v-container>  
    <v-row>  
      <v-col col="12">  
        <v-text-field label="Append Outer" append-outer-icon="mdi-map-marker"></v-text-field>  
      </v-col>  
    </v-row>  
  </v-container>  
</template>  
<script>  
export default {  
  name: "HelloWorld",  
  data: () => ({}),  
};  
</script>

We set the props so that we can add the icons.

prepend-icon and append-icon adds the icon inside the line.

And append-outer-icon adds the icon outside the line.

Conclusion

We can add text fields with icons and make them read only.