OcTextInput component

Description

OcTextInputs allow users to provide text input. Commonly used when the expected input is short. This component has a range of options and supports several input types, including numbers. For longer input, use the OcTextarea component.

Accessibility

The label is required and represents the name of the input.

The description-message can be used additionally to give further information about the input field. When a description is given, it will be referenced via the aria-describedby property automatically. An error or warning will replace the description as well as the aria-describedby property until the error or warning is fixed.

Examples

Default

The default and most simple use case involves a v-model and a label.

<template>
  <oc-text-input v-model="name" label="Your name" />
  <p>So your name is {{ name }}? Nice to meet you!</p>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const name = ref<string>('John Doe')
</script>

Inline Label

<oc-text-input label="Your name" :inline-label="true" />

Disabled

<oc-text-input disabled label="Disabled" model-value="I am disabled" />

Input Types

The following input types ares supported.

<oc-text-input class="mb-2" label="Text" />
<oc-text-input class="mb-2" read-only="true" label="Read only" value="I am read only" />
<oc-text-input class="mb-2" type="number" label="Number" />
<oc-text-input class="mb-2" type="email" label="Email" />
<oc-text-input class="mb-2" type="password" label="Password" />

Interactions

<template>
  <oc-button class="my-4" @click="focus">Focus input below</oc-button>
  <oc-text-input ref="inputForFocusRef" label="Focus field" />
  <oc-button class="my-4" @click="focusAndSelect">Focus and select input below</oc-button>
  <oc-text-input
    ref="inputForFocusSelectRef"
    label="Select field"
    model-value="Text to be selected"
  />
  <oc-text-input v-model="inputValueForClearing" label="Clear input" :clear-button-enabled="true" />
  <oc-text-input
    v-model="inputValueWithDefault"
    label="Input with default"
    :clear-button-enabled="true"
    default-value="Some default"
  />

  <p>Value: {{ inputValueWithDefault !== null ? inputValueWithDefault : 'null' }}</p>
</template>

<script setup lang="ts">
import { ref, unref, useTemplateRef } from 'vue'

const inputValueForClearing = ref<string>('clear me')
const inputValueWithDefault = ref<string | null>(null)

const inputForFocusRef = useTemplateRef('inputForFocusRef')
const focus = () => {
  unref(inputForFocusRef)?.focus()
}
const inputForFocusSelectRef = useTemplateRef('inputForFocusSelectRef')
const focusAndSelect = () => {
  unref(inputForFocusSelectRef)?.focus()
}
</script>

Messages

<template>
  <oc-text-input
    label="Input with description message below"
    class="mb-2"
    description-message="This is a description message."
    :fix-message-line="true"
  />
  <oc-text-input
    v-model="valueForMessages"
    label="Input with error with reserved space below"
    class="mb-2"
    :error-message="errorMessage"
    :fix-message-line="true"
  />
  <oc-text-input
    v-model="valueForMessages"
    label="Input with error without reserved space below"
    class="mb-2"
    :error-message="errorMessage"
  />
</template>

<script setup lang="ts">
import { computed, ref, unref } from 'vue'

const valueForMessages = ref<string>('')

const errorMessage = computed(() => {
  return unref(valueForMessages).length === 0 ? 'Value is required.' : ''
})
</script>

Customization

OcTextInput is highly customizable

<template>
  <div class="border-b mb-2">
    <oc-text-input class="mb-2" label="Your name" :inline-label="true" :has-border="false" />
  </div>
  <div class="border-b">
    <oc-text-input class="mb-2" label="Full address" :inline-label="true" :has-border="false" />
  </div>
</template>

Properties

Emits

Slots