Input 輸入

輸入框用來收集文字，尺寸對齊 Button，並支援密碼、多行、清除、前後綴、狀態與圓角。

示範

基礎

綁定 value，並以 e.detail.value 監聽 input。

值：（空）

<!-- host: const text = ref(""); function onInput(e: CustomEvent<{ value: string }>) { text.value = e.detail.value } -->
<gk-input placeholder="請輸入" :value="text" @input="onInput"></gk-input>
<p>值：{{ text }}</p>

尺寸

尺寸與 Button 一致：sm、md、lg。

<gk-input size="sm" placeholder="小"></gk-input>
<gk-input size="md" placeholder="中"></gk-input>
<gk-input size="lg" placeholder="大"></gk-input>

密碼

type="password" 會在後綴區加入顯示／隱藏切換。

<gk-input
  type="password"
  placeholder="密碼"
  :value="passwordValue"
  @input="onPasswordInput"
></gk-input>

多行文字

type="textarea" 會渲染多行控制項；以 rows 設定高度。

<gk-input
  type="textarea"
  rows="4"
  placeholder="寫下備註"
  :value="textareaValue"
  @input="onTextareaInput"
></gk-input>

可清除

clearable 在有值且可互動時顯示清除按鈕。

<gk-input
  clearable
  placeholder="可清除"
  :value="clearableValue"
  @input="onClearableInput"
></gk-input>

前後綴

使用 prefix 與 suffix 插槽放置裝飾。內建清除與密碼切換會渲染在 suffix 插槽之後。

https://$USD

<gk-input placeholder="example.com">
  <span slot="prefix">https://</span>
</gk-input>
<gk-input placeholder="金額">
  <span slot="prefix">$</span>
  <span slot="suffix">USD</span>
</gk-input>

狀態

以 status 顯示驗證回饋：success、warning 或 error。

<gk-input status="success" placeholder="成功" value="看起來沒問題"></gk-input>
<gk-input status="warning" placeholder="警告" value="請檢查"></gk-input>
<gk-input status="error" placeholder="錯誤" value="無效"></gk-input>

圓角

設定 round 可得到全圓角外觀。

<gk-input round placeholder="圓角"></gk-input>
<gk-input round size="lg" placeholder="大型圓角"></gk-input>

停用／唯讀

disabled 會阻擋互動；readonly 可聚焦但無法編輯。

<gk-input disabled placeholder="停用" value="無法編輯"></gk-input>
<gk-input readonly placeholder="唯讀" value="僅供閱讀"></gk-input>

API

Input Props

Prop	Type	Default
type	'text' | 'password' | 'textarea'	'text'
size	'sm' | 'md' | 'lg'	'md'
value	string	''
placeholder	string	''
disabled	boolean	false
readonly	boolean	false
clearable	boolean	false
round	boolean	false
status	'success' | 'warning' | 'error' | ''	''
rows	number	3
name	string	''

Input Slots

Name	Description
prefix	前方裝飾
suffix	後方裝飾（位於清除／密碼切換之前）

Input Events

Name	Description
input	值變更（輸入或清除）；bubbles；composed: true；detail: { value: string }
change	類似原生 change（失焦／提交或清除）；bubbles；composed: true；detail: { value: string }

CSS Parts

Part	Description
base	外層表面
input	原生 <input> 或 <textarea>
prefix	prefix 插槽容器
suffix	suffix 插槽與內建控制項容器
clear	清除按鈕
password-toggle	顯示／隱藏密碼按鈕