ช่องป้อนข้อมูล

ช่องข้อความหลักสำหรับการป้อนข้อมูลอิสระของผู้ใช้ ตัวแปรเฉพาะขยายฐานนี้สำหรับความหมายเฉพาะ การตรวจสอบ หรือความสะดวกในการใช้งาน (การค้นหา อีเมล หมายเลขติดต่อ ฯลฯ)

เมื่อใดควรใช้

ใช้ spr-input ฐานเมื่อคุณต้องการช่องที่แก้ไขได้ทั่วไป เลือกตัวแปรเมื่อ:

การตรวจสอบความหมายหรือคำแนะนำ UX ในตัว (เช่น อีเมล รหัสผ่าน URL)
ต้องการ UI เพิ่มเติม (ตัวเลือกประเทศ ตัวเลือกสกุลเงิน)
ตรรกะการจัดรูปแบบ/มาสก์เป็นแบบเฉพาะ (หมายเลขติดต่อ สกุลเงิน)

การใช้งานฐาน

Text Input

vue

<template>
  <spr-input v-model="model" label="Text Input" placeholder="Enter your username" />
</template>

รูปแบบทั่วไป

คุณสมบัติสถานะและการตกแต่งที่ใช้ร่วมกันโดยตัวแปร:

สถานะที่ใช้งานอยู่ ข้อผิดพลาด ปิดใช้งาน
คำนำหน้า/คำต่อท้าย (สล็อตต่อท้าย)
ข้อความช่วยเหลือและสล็อต helperMessage
การนับตัวอักษรผ่าน show-char-count, min-length, max-length

ตัวแปร

ตัวแปร	คำอธิบาย	ลิงก์
ค้นหา	เพิ่มประสิทธิภาพสำหรับการกรองและความสะดวกในการค้นหา	/documentation/components/input/input-search
ชื่อผู้ใช้	ช่องชื่อผู้ใช้ (อนาคต: กฎความเป็นเอกลักษณ์)	/documentation/components/input/input-username
อีเมล	ช่องป้อนข้อมูลเฉพาะอีเมล	/documentation/components/input/input-email
รหัสผ่าน	รายการที่ถูกมาสก์ด้วยการเปิดเผยทางเลือก	/documentation/components/input/input-password
URL	บังคับใช้ความหมาย URL	/documentation/components/input/input-url
หมายเลขติดต่อ	ช่องป้อนหมายเลขที่รับรู้ประเทศ + การตรวจสอบ	/documentation/components/input/input-contact-number
ช่องป้อนดรอปดาวน์	ช่องป้อนที่จัดสไตล์แสดงเท่านั้นใช้เป็นทริกเกอร์ดรอปดาวน์	/documentation/components/input/input-dropdown
สกุลเงิน	การเลือกสกุลเงิน + การจัดรูปแบบ (รหัส/สัญลักษณ์ ทศนิยม)	/documentation/components/input/input-currency

สล็อตขั้นสูง

สล็อต	กรณีการใช้งาน
`prefix`	ไอคอนหรือตัวระบุตามบริบท (เช่น ไอคอนค้นหา)
`trailing`	หน่วย ป้ายในบรรทัด การดำเนินการขนาดกะทัดรัด
`icon`	การตกแต่งภายใน (สถานะ/การดำเนินการ)
`helperMessage`	เนื้อหาข้อความช่วยเหลือ/ข้อผิดพลาดที่สมบูรณ์ (ไอคอน + ข้อความ)

หมายเหตุการเข้าถึง

จับคู่พร็อพส์ label เสมอ (หรือการเชื่อมโยง <label for> ภายนอก) เพื่อความชัดเจน
หลีกเลี่ยงการติดป้ายเฉพาะตัวยึดตำแหน่ง ตัวยึดตำแหน่งควรบอกใบ้รูปแบบ ไม่ใช่ให้ความหมาย
ใช้ข้อความช่วยเหลือเพื่อชี้แจงข้อจำกัด (ความยาว ตัวอักษรที่อนุญาต) แทนที่จะพึ่งพาข้อผิดพลาดการตรวจสอบเพียงอย่างเดียว

ดูเพิ่มเติม

คอมโพเนนต์เลือก (ตัวเลือกที่มีโครงสร้าง)
พื้นที่ข้อความ (เนื้อหาหลายบรรทัด)
อัปโหลดไฟล์ (การป้อนข้อมูลที่ไม่ใช่ข้อความ)

สถานะที่ใช้งานอยู่

Text Input

vue

<template>
  <spr-input v-model="inputValue" label="Text Input" placeholder="Enter your username" active />
</template>

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

const inputValue = ref('');
</script>

สถานะข้อผิดพลาด

Text Input

vue

<template>
  <spr-input v-model="inputValue" label="Text Input" placeholder="Enter your username" :error="true">
    <template #icon>
      <Icon icon="ph:warning-circle-fill" />
    </template>
  </spr-input>
</template>

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

const inputValue = ref('');
</script>

สถานะปิดใช้งาน

Text Input

vue

<template>
  <spr-input v-model="inputValue" label="Text Input" placeholder="Enter your username" :disabled="true" />
</template>

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

const inputValue = ref('');
</script>

ความยาวต่ำสุดสูงสุดและการนับตัวอักษร

คุณสามารถตั้งขีดจำกัดความยาวต่ำสุดหรือสูงสุดโดยส่งพร็อพส์ min-length หรือ max-length ด้วยค่าตัวเลขที่สอดคล้องกัน นอกจากนี้ คุณสามารถเปิดใช้งานการแสดงตัวนับตัวอักษรที่ด้านล่างขวาของช่องป้อนข้อมูลด้วยพร็อพส์ show-char-count

Text Input

0/50

Character Length: 0

Numeric Input

Max 3 digits allowed

0/3

vue

<template>
  <!-- Text input with character count -->
  <spr-input
    v-model="inputValue"
    label="Text Input"
    placeholder="Enter your username"
    :min-length="0"
    :max-length="50"
    show-char-count
  />

  <!-- Numeric input with character count and helper -->
  <spr-input
    v-model="numericValue"
    type="number"
    label="Numeric Input"
    placeholder="Enter a number"
    :max-length="3"
    helper-text="Max 3 digits allowed"
    display-helper
    show-char-count
  />
</template>

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

const inputValue = ref('');
const numericValue = ref(0);
</script>

คำนำหน้า

Text Input

vue

<template>
  <spr-input v-model="inputValue" label="Text Input" placeholder="Enter your username">
    <template #prefix>
      <Icon icon="ph:warning-circle-fill" />
    </template>
  </spr-input>
</template>

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

const inputValue = ref('');
</script>

ป้ายต่อท้าย

Offset xs

minutes

offset sm

minutes

offset md

Name of the user

vue

<template>
  <!-- xs -->
  <spr-input v-model="inputValueXS" label="Offset xs" placeholder="00" offset-size="xs" type="number">
    <template #trailing> minutes </template>
  </spr-input>

  <!-- sm -->
  <spr-input v-model="inputValueSM" label="offset sm" placeholder="00" offset-size="sm" type="number">
    <template #trailing> minutes </template>
  </spr-input>

  <!-- md -->
  <spr-input v-model="inputValueMD" label="offset md" placeholder="Enter your name" offset-size="md">
    <template #trailing> Name of the user </template>
  </spr-input>
</template>

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

const inputValueXS = ref('');

const inputValueSM = ref('');

const inputValueMD = ref('');
</script>

การแสดงการนับตัวอักษร

คุณสามารถแสดงตัวนับตัวอักษรที่ด้านล่างขวาของช่องป้อนข้อมูลโดยตั้งพร็อพส์ show-char-count เป็น true เมื่อใช้กับ max-length ตัวนับตัวอักษรจะแสดงในรูปแบบ "ปัจจุบัน/สูงสุด" และจะเปลี่ยนสีเพื่อระบุเมื่อถึงความยาวสูงสุด

Text with Character Count

0/20

vue

<template>
  <spr-input
    v-model="inputValue"
    label="Text with Character Count"
    placeholder="Type to see the counter"
    :max-length="20"
    show-char-count
  />
</template>

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

const inputValue = ref('');
</script>

ข้อความช่วยเหลือ

ข้อความช่วยเหลือเป็นป้ายข้อความใต้ช่องป้อนข้อมูลที่ให้ข้อมูลเพิ่มเติมเกี่ยวกับคำแนะนำ เคล็ดลับการจัดรูปแบบ ข้อเสนอแนะการตรวจสอบ ฯลฯ

เพื่อแสดงข้อความช่วยเหลือ ตั้งพร็อพส์ display-helper เป็น true และเพิ่มพร็อพส์ helper-text ด้วยข้อความข้อความช่วยเหลือ คุณยังสามารถแทรกไอคอนด้วยพร็อพส์ helper-icon สิ่งนี้ใช้ไลบรารีไอคอน Iconify

Text Input

This is a helper message

Text Input

This is an error message

vue

<template>
  <spr-input
    v-model="inputValue"
    label="Text Input"
    placeholder="Enter your text"
    helper-text="This is a helper message"
    display-helper
  />

  <spr-input
    v-model="inputValue"
    label="Text Input"
    placeholder="Enter your text"
    helper-text="This is an error message"
    helper-icon="ph:warning-circle-fill"
    display-helper
    error
  />
</template>

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

const inputValue = ref('');
</script>

หรือคุณสามารถใช้สล็อต helperMessage เพื่อแสดงข้อความช่วยเหลือแบบกำหนดเอง

Text Input

This is a helper message

Text Input

This is an error message

vue

<template>
  <spr-input v-model="inputValue" label="Text Input" placeholder="Enter your text">
    <template #helperMessage> This is a helper message </template>
  </spr-input>

  <spr-input v-model="inputValue" label="Text Input" placeholder="Enter your text" :error="true">
    <template #helperMessage>
      <icon icon="ph:warning-circle-fill" width="20px" height="20px" />
      <span>This is an error message</span>
    </template>
  </spr-input>
</template>

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

const inputValue = ref('');
</script>

ประเภทช่องป้อนข้อมูล

ช่องป้อนการค้นหา

vue

<template>
  <spr-input-search v-model="inputValueSearch" label="Search" placeholder="Search ..." />
</template>

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

const inputValueSearch = ref('');
</script>

ช่องป้อนชื่อผู้ใช้

Username

vue

<template>
  <spr-input-username v-model="inputValueUsername" label="Username" placeholder="Enter username" />
</template>

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

const inputValueUsername = ref('');
</script>

ช่องป้อนอีเมล

Username

vue

<template>
  <spr-input-email v-model="inputValueEmail" label="Username" placeholder="Enter email" />
</template>

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

const inputValueEmail = ref('');
</script>

ช่องป้อนรหัสผ่าน

vue

<template>
  <spr-input-password v-model="inputValuePassword" label="Password" placeholder="Enter password" />
</template>

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

const inputValuePassword = ref('');
</script>

ช่องป้อน URL

URL

https://

vue

<template>
  <spr-input-url v-model="inputValueURL" label="URL" placeholder="Enter url" />
</template>

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

const inputValueURL = ref('');
</script>

ช่องป้อนหมายเลขติดต่อ

คอมโพเนนต์นี้ใช้ libphonenumber-js เพื่อแยกวิเคราะห์และจัดรูปแบบการป้อนข้อมูลเมื่อเลือนออก การมาสก์หมายเลขติดต่อเมื่อเปลี่ยนแปลงจะถูกนำมาใช้ในอนาคต

Contact Number

Disabled Calling Country Code

Model Output:

Selected Country Code:

Selected Country Calling Code:

Error Handling: []

Parsed International Number:

หมายเหตุสำคัญ:

เนื่องจากเอาต์พุต v-model ไม่ได้อยู่ในรูปแบบสากล (เช่น +63XXXXXXXXXXX) คุณจะต้องสร้างฟังก์ชันแยกต่างหากที่แยกวิเคราะห์เอาต์พุตโมเดลควบคู่กับรหัสประเทศที่เลือก

vue

<template>
  <div>
    <div class="spr-grid spr-gap-4">
      <spr-input-contact-number
        v-model="inputValueContactNumber"
        label="Contact Number"
        @get-selected-country-calling-code="handleSelectedCountryCallingCode"
        @get-contact-number-errors="handleContactNumberErrors"
      />
      <spr-input-contact-number
        v-model="inputValueContactNumber"
        label="Disabled Calling Country Code"
        @get-selected-country-calling-code="handleSelectedCountryCallingCode"
        @get-contact-number-errors="handleContactNumberErrors"
        disabledCountryCallingCode
      />
    </div>
    <p>Model Output: {{ inputValueContactNumber }}</p>
    <p>Selected Country Code: {{ selectedCountryCode }}</p>
    <p>Selected Country Calling Code: {{ selectedCountryCallingCode }}</p>
    <p>Error Handling: {{ contactNumberErrors }}</p>
    <p>Parsed International Number: {{ parseInternationalNumber }}</p>
  </div>

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

    const inputValueContactNumber = ref('');
    const selectedCountryCode = ref('');
    const selectedCountryCallingCode = ref('');
    const contactNumberErrors = ref([]);

    const handleSelectedCountryCallingCode = (value: string) => {
      selectedCountryCode.value = value.countryCode;
      selectedCountryCallingCode.value = value.countryCallingCode;
    };

    const handleContactNumberErrors = (errors: { title: string; message: string }[]) => {
      contactNumberErrors.value = errors;
    };

    const handleContactNumberErrors = (errors: { title: string; message: string }[]) => {
      contactNumberErrors.value = errors;
    };

    const parseInternationalNumber = computed(() => {
      if (inputValueContactNumber.value) {
        const formattedNumber = `+${selectedCountryCallingCode.value}${inputValueContactNumber.value.replace(/[^0-9]/g, '')}`;

        return formattedNumber;
      }

      return '';
    });
  </script>
</template>

ตั้งรหัสประเทศที่เลือกไว้ล่วงหน้า

Contact Number

vue

<div class="spr-mt-3">
  <spr-input-contact-number
    v-model="inputValue"
    label="Contact Number"
    pre-selected-country-code="US"
  />
</div>

ช่องป้อนดรอปดาวน์

นี่คืออันที่ใช้ในคอมโพเนนต์ดรอปดาวน์ หากคุณต้องการใช้งานดรอปดาวน์ คุณสามารถอ้างอิง คอมโพเนนต์ดรอปดาวน์

Dropdown Input

vue

<template>
  <spr-input-dropdown v-model="dropdownInput" label="Dropdown Input" placeholder="Select an item ..." readonly />
</template>

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

const dropdownInput = ref('');
</script>

การอ้างอิง API

พร็อพส์

ชื่อ	คำอธิบาย	ประเภท	ค่าเริ่มต้น
modelValue	ค่าปัจจุบันของช่องป้อนข้อมูล พร็อพส์นี้ใช้สำหรับการผูก v-model เพื่อเปิดใช้งานการผูกข้อมูลสองทางระหว่างคอมโพเนนต์และพาเรนต์	string \| number	''
type	ระบุประเภทของช่องป้อนข้อมูล ซึ่งกำหนดพฤติกรรมและการตรวจสอบ รองรับประเภทอินพุต HTML มาตรฐานทั้งหมด รวมถึง: text, number, email, password, search, url, tel date, datetime-local, month, time, week checkbox, radio, range, color file, button, submit, reset, image, hidden contact-number (ประเภทกำหนดเอง)	string	'text'
id	ตัวระบุเฉพาะสำหรับองค์ประกอบอินพุต ใช้สำหรับเชื่อมโยงอินพุตกับป้ายสำหรับการเข้าถึง	string	'spr-input'
label	ข้อความป้ายที่แสดงเหนือช่องป้อนข้อมูลเพื่ออธิบายวัตถุประสงค์	string	''
supporting-label	ข้อความข้างป้ายที่มีสไตล์สนับสนุน	string	''
placeholder	ข้อความคำใบ้ที่แสดงภายในอินพุตเมื่อว่างเปล่า ให้คำแนะนำเกี่ยวกับสิ่งที่จะป้อน	string	''
active	เมื่อตั้งเป็น `true` อินพุตจะปรากฏในสถานะที่ใช้งานอยู่/โฟกัสแม้ว่าจะไม่ได้โฟกัสจริงๆ	boolean	false
error	เมื่อตั้งเป็น `true` แสดงอินพุตในสถานะข้อผิดพลาดด้วยการจัดสไตล์ข้อผิดพลาด โดยทั่วไปใช้สำหรับข้อเสนอแนะการตรวจสอบ	boolean	false
disabled	เมื่อตั้งเป็น `true` ทำให้อินพุตไม่โต้ตอบและระบุสถานะปิดใช้งานด้วยภาพ	boolean	false
readonly	เมื่อตั้งเป็น `true` ทำให้อินพุตอ่านได้อย่างเดียว ป้องกันผู้ใช้ไม่ให้แก้ไขค่า แต่ยังคงอนุญาตให้โฟกัสและเลือก	boolean	false
minLength	ตั้งจำนวนตัวอักษรต่ำสุดที่อนุญาตในอินพุต ใช้สำหรับการตรวจสอบ	number	undefined
maxLength	ตั้งจำนวนตัวอักษรสูงสุดที่อนุญาตในอินพุต ใช้สำหรับการตรวจสอบและกับ `showCharCount` เพื่อแสดงขีดจำกัด	number	undefined
showCharCount	เมื่อตั้งเป็น `true` แสดงตัวนับตัวอักษรที่ด้านล่างขวาของช่องป้อนข้อมูล เมื่อใช้กับ `maxLength` แสดงรูปแบบปัจจุบัน/สูงสุด	boolean	false
offsetSize	ควบคุมขนาดการเว้นวรรค/ออฟเซ็ตเมื่อใช้เนื้อหาต่อท้าย ส่งผลต่อการตำแหน่งและการเติม: `xs`: ออฟเซ็ตขนาดเล็กพิเศษ การเติมน้อยที่สุด `sm`: ออฟเซ็ตขนาดเล็ก การเติมมาตรฐาน `md`: ออฟเซ็ตขนาดกลาง การเติมขนาดใหญ่ขึ้น	'xs' \| 'sm' \| 'md'	'sm'
displayHelper	เมื่อตั้งเป็น `true` แสดงพื้นที่ข้อความช่วยเหลือใต้ช่องป้อนข้อมูล	boolean	false
helperText	เนื้อหาข้อความสำหรับข้อความช่วยเหลือที่แสดงใต้ช่องป้อนข้อมูลเมื่อ `displayHelper` เป็นจริง	string	''
helperIcon	ชื่อไอคอนจาก Iconify ที่จะแสดงควบคู่กับข้อความช่วยเหลือ มีประโยชน์โดยเฉพาะสำหรับข้อความเตือนหรือข้อผิดพลาด	string	null

อีเวนต์

ชื่อ	คำอธิบาย	พารามิเตอร์
update:modelValue	ปล่อยเมื่อค่าอินพุตเปลี่ยนแปลง อีเวนต์นี้เปิดใช้งานการผูก v-model ให้ทำงานได้อย่างถูกต้อง	(value: string \| number): ค่าที่ใหม่ของช่องป้อนข้อมูล

สล็อต

ชื่อ	คำอธิบาย
prefix	เนื้อหาที่จะแสดงที่จุดเริ่มต้นของช่องป้อนข้อมูล โดยทั่วไปใช้สำหรับไอคอนหรือการตกแต่งเพิ่มเติม
trailing	เนื้อหาที่จะแสดงที่จุดสิ้นสุดของช่องป้อนข้อมูล ใช้สำหรับหน่วย ข้อความเพิ่มเติม หรือปุ่มการดำเนินการ
icon	เนื้อหาไอคอนแบบกำหนดเองที่จะแสดงภายในช่องป้อนข้อมูล มีประโยชน์โดยเฉพาะสำหรับประเภทอินพุตแบบกำหนดเอง
helperMessage	เนื้อหาแบบกำหนดเองสำหรับพื้นที่ข้อความช่วยเหลือ อนุญาต UI ที่ซับซ้อนมากกว่าข้อความและไอคอนเดียว

การใช้ผลิตภัณฑ์

ปุ่ม

ปฏิทิน

แผงด้านข้าง

ตาราง

เครื่องมือเลือกวันที่