Text Input

TextInput.vue

<template>
  <PeachyInput.Input class="text">
    <PeachyTextInput.Input
      v-bind="$attrs"
      v-model:value="input"
      placeholder="Placeholder">
      <template #before>
        <PeachyInput.Label>Text input</PeachyInput.Label>
      </template>
    </PeachyTextInput.Input>
  </PeachyInput.Input>
</template>

text-input.css

.peachy-input.text {
  display: grid;
  gap: var(--gap);
  grid-template-rows: auto auto;
}

.peachy-text-input__input {
  font: inherit;
  color: inherit;

  border-radius: 0.15rem;
  padding: 0.5rem;
  width: 15rem;

  background-color: var(--bg);
  border: 1px solid var(--border);
  caret-color: var(--brand-color);

  transition: border-color 0.25s;
}

.peachy-text-input__input:not(:disabled):hover {
  border-color: var(--brand-color-dimmed);
}

.peachy-text-input__input:focus,
.peachy-text-input__input:focus-visible {
  outline: none !important;
  border-color: var(--brand-color);
}

Anatomy

<template>
  <PeachyInput.Input>
    <PeachyInput.Label />
    <PeachyTextInput.Input />
  </PeachyInput.Input>
</template>

<script lang="ts" setup>
  import { PeachyInput, PeachyTextInput } from "typeach";
</script>

Props & Emits

Input

Props

Name	Default	Type	Description
value	""	string?
disabled	false	boolean?
readonly	false	boolean?
required	false	boolean?	The component only labels it as required with aria-required and does not deal with any error messages for you.
textarea	false	boolean?

Emits

@	Payload
update:value	string
validate	string
clear-validation

---

Styling

CSS Selectors

Follows our CSS classes convention.

State selectors

Selector	Description	For
:disabled	For a disabled input.	Input
:read-only	For a read-only input.	Input
[data-textarea="<boolean>"] or textarea	To differentiate between an input and a textarea.	Input