Components

Input 输入框

带标签、提示文案与错误态的文本输入；标签、说明和错误状态会自动关联至原生控件。

基础用法

hint 与 error 互斥，error 时环线转为红色。

集群标识符

由小写字母、数字及横线组成

API 端点

该端点未通过 TLS 证书校验

<div class="grid gap-5 sm:grid-cols-2">
  <Input v-model="text" label="集群标识符" placeholder="请输入节点名称…" hint="由小写字母、数字及横线组成" />
  <Input v-model="err" label="API 端点" error="该端点未通过 TLS 证书校验" />
</div>

尺寸与前后缀

leading / trailing 插槽嵌入更醒目的预设前后缀、图标与单位。

https://

<div class="grid gap-5 sm:grid-cols-2">
  <Input v-model="s1" size="sm" placeholder="Small" />
  <Input v-model="s2" size="lg" placeholder="Large" />
  <Input v-model="s3" placeholder="gateway.recloud.studio">
    <template #leading>https://</template>
  </Input>
  <Input v-model="s4" placeholder="搜索节点…" disabled />
</div>

API 参考

属性	类型	默认值	说明
`model-value`	`string \| number`	`—`	v-model 绑定值。
`id`	`string`	`自动生成`	原生控件 ID，可用于稳定 SSR 输出。
`label / hint / error`	`string`	`—`	标签、说明与错误文案，会自动关联至控件。
`size`	`'sm' \| 'md' \| 'lg'`	`md`	36 / 40 / 44px 高度。
`type`	`string`	`text`	原生 input 类型。
`disabled / readonly / required`	`boolean`	`false`	状态控制。
`leading / trailing`	`slot`	`—`	框内前后缀。