Input 输入框

示例

基础用法

<div>
  左边<Input class="mx-2 w-20 border-b py-1" />右边
</div>

带清除按钮

<Input clearable />

输入内容右对齐

<Input class="text-right" placeholder="请输入验证码" clearable />

只读状态

<Input readonly value="输入框的内容是只读的" />

禁用状态

<Input disabled value="被禁用的输入框" />

表单-水平布局

<script lang="ts">
  let form = $state({ username: '', password: '' })
</script>

<Form
  header="表单-水平布局"
  bind:data={form}
  layout="horizontal"
  --sunp-label-width="80px"
>
  <FormItem label="用户名" field="username" required>
    <Input
      bind:value={form.username}
      placeholder="请输入用户名"
      autocomplete="username"
    />
  </FormItem>
  <FormItem label="密码" field="password" required>
    <Input
      type="password"
      bind:value={form.password}
      placeholder="请输入密码"
      autocomplete="current-password"
    />
  </FormItem>
</Form>

表单-垂直布局

<Form header="表单-垂直布局" bind:data={form}>
  <FormItem label="用户名" field="username" required>
    <Input bind:value={form.username} placeholder="请输入用户名" />
  </FormItem>
  <FormItem label="密码" field="password" required>
    <Input bind:value={form.password} placeholder="请输入密码" />
  </FormItem>
</Form>

Input

属性

类型定义

InputTypeAttribute

/** 输入框类型 */
type InputTypeAttribute =
  | 'email'
  | 'number'
  | 'password'
  | 'tel'
  | 'text'
  | 'url'

事件