Input Inline

A text input component for inline text editing / a clean input style with a icon to edit

Example Usage

Example

Paul M.

Placeholder

Mathematik Klausur

In case the size of the input is limited, the text get's cropped nicely

Mathematik Klausur

<template>
  <sk-input-inline v-model="value" placeholder="Name" class="mr-m mb-m" />
  <sk-input-inline v-model="value3" placeholder="Placeholder" class="mr-m mb-m" />
  <h2>
    <sk-input-inline v-model="value2" placeholder="Title" />
  </h2>

  <blockquote>In case the size of the input is limited, the text get's cropped nicely</blockquote>
  <h2>
    <sk-input-inline v-model="value2" placeholder="Title" class="max-w-[190px]" />
  </h2>
</template>

<script setup>
import { ref } from 'vue';

const value = ref('Paul M.');
const value2 = ref('Mathematik Klausur');
const value3 = ref('');
</script>

Reference

Properties

Name	Type	Default	Description
v-model	ref	null	The value to edit
placeholder	String	''	The empty state of the input, displayed greyed out

Events

Name	Parameters	Description
@input	event	the payload of the input
@blur	event	the payload of the input