Input

Input collects text with sizes aligned to Button, plus password, textarea, clearable, prefix/suffix, status, and round.

Demos

Basic

Bind value and listen for input with e.detail.value.

Value: (empty)

<!-- host: const text = ref(""); function onInput(e: CustomEvent<{ value: string }>) { text.value = e.detail.value } -->
<gk-input placeholder="Type here" :value="text" @input="onInput"></gk-input>
<p>Value: {{ text }}</p>

Size

Sizes match Button: sm, md, and lg.

<gk-input size="sm" placeholder="Small"></gk-input>
<gk-input size="md" placeholder="Medium"></gk-input>
<gk-input size="lg" placeholder="Large"></gk-input>

Password

type="password" adds a show/hide toggle in the suffix area.

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

Textarea

type="textarea" renders a multi-line control; set rows for height.

<gk-input
  type="textarea"
  rows="4"
  placeholder="Write a note"
  :value="textareaValue"
  @input="onTextareaInput"
></gk-input>

Clearable

clearable shows a clear control when the value is non-empty and the field is interactive.

<gk-input
  clearable
  placeholder="Clearable"
  :value="clearableValue"
  @input="onClearableInput"
></gk-input>

Prefix / suffix

Use the prefix and suffix slots for adornments. Built-in clear and password toggle render after the suffix slot.

https://$USD

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

Status

Validation feedback via status: success, warning, or error.

<gk-input status="success" placeholder="Success" value="Looks good"></gk-input>
<gk-input status="warning" placeholder="Warning" value="Check this"></gk-input>
<gk-input status="error" placeholder="Error" value="Invalid"></gk-input>

Round

Set round for a fully rounded field.

<gk-input round placeholder="Round"></gk-input>
<gk-input round size="lg" placeholder="Large round"></gk-input>

Disabled / readonly

disabled blocks interaction; readonly keeps focus but prevents edits.

<gk-input disabled placeholder="Disabled" value="Cannot edit"></gk-input>
<gk-input readonly placeholder="Readonly" value="Read only"></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	Leading adornment
suffix	Trailing adornment (before clear / password toggle)

Input Events

Name	Description
input	Value changed (typing or clear); bubbles; composed: true; detail: { value: string }
change	Native-style change (blur/commit or clear); bubbles; composed: true; detail: { value: string }

CSS Parts

Part	Description
base	Outer surface
input	Native <input> or <textarea>
prefix	Prefix slot wrapper
suffix	Suffix slot + built-in controls wrapper
clear	Clear button
password-toggle	Show/hide password button