跳至正文
uiify

框架

Next.jsTanStack StartAstroVike

样式

CSSTailwind

主题

语言

English简体中文日本語العربيةРусскийEspañolPortuguês (Brasil)

Input Group

A labeled native input with an optional prefix, suffix, or related action.

浏览器
Chrome 123+Firefox 121+Safari 17.5+
层级
0
强制布局预算
0 ms
axe 预算
0
支持 SSR
是
公开契约
测试环境

交互示例

Input Group

https://

Enter a domain. Add https:// when using the value.

示例

Currency and units

Use passive affixes for context and keep a visible label on the input. The amount is in US dollars.

$USD

Amount in US dollars.

import { Input, InputGroup, InputGroupAddon } from "@gunkin/uiify";

export default function Example() {
  return (
    <div className="example-field">
      <label htmlFor="input-group-amount">Price</label>
      <InputGroup>
        <InputGroupAddon align="start">$</InputGroupAddon>
        <Input id="input-group-amount" name="price" inputMode="decimal" defaultValue="25.00" aria-describedby="input-group-amount-help" />
        <InputGroupAddon align="end">USD</InputGroupAddon>
      </InputGroup>
      <p className="example-description" id="input-group-amount-help">Amount in US dollars.</p>
    </div>
  );
}

Invalid and disabled fields

Describe server errors below the input. A disabled input does not disable a related Configure link.

https://

Enter a valid domain.

Configure
import { Button, Input, InputGroup, InputGroupAddon } from "@gunkin/uiify";

export default function Example() {
  return (
    <div className="example-form">
      <div className="example-field">
        <label htmlFor="input-group-states-website">Website</label>
        <InputGroup>
          <InputGroupAddon align="start">https://</InputGroupAddon>
          <Input id="input-group-states-website" name="website" invalid defaultValue="not a domain" aria-describedby="input-group-states-error" />
        </InputGroup>
        <p className="example-error" id="input-group-states-error">Enter a valid domain.</p>
      </div>
      <div className="example-field">
        <label htmlFor="input-group-states-endpoint">Endpoint</label>
        <InputGroup>
          <Input id="input-group-states-endpoint" name="endpoint" disabled defaultValue="api.uiify.dev" />
          <InputGroupAddon align="end"><Button as="a" href="/docs/installation" size="sm" variant="ghost">Configure</Button></InputGroupAddon>
        </InputGroup>
      </div>
    </div>
  );
}

API

InputGroup

属性类型默认值说明
childrenReactNode—Native controls and optional start/end addons.
className / style / ref / native div propsnative div props—Native wrapper props, styles, events, and ref are forwarded.
renderReactElement | ((props, state) => ReactElement)—替换渲染元素，同时保留行为和无障碍连接关系。

InputGroupAddon

属性类型默认值说明
align*"start" | "end"—Places the addon at the logical inline start or end.
childrenReactNode—Addon content; it does not label the input.
renderReactElement | ((props, state) => ReactElement)—替换渲染元素，同时保留行为和无障碍连接关系。

键盘

按键操作

无障碍

A layout wrapper around consumer-owned native children. Label the input independently; addons are not labels, and actions remain native links or buttons. The wrapper adds no focus, validation, or client behavior.

样式钩子

data-uiify-input-groupdata-part="root|addon"data-align