Raft 设计系统
English

组件 · 输入

InputGroup

An input with a fixed prefix, suffix, icon or button inside the same bordered box, such as a domain, a unit or a search icon.

稳定
import { InputGroup } from "@botiverse/raft-ui";
本页尚未翻译
译文完成之前，这里显示英文原文。 阅读英文版

An input group puts fixed text, an icon or a button inside an input's box: a domain before a server's address, a unit after a budget, a search icon before a query. The box, its border and its states belong to the group, so the input and its addons read as one control.

When to use

SituationUse
A value with a fixed prefix or suffix: raft.build/, #, USD / dayInputGroup
A search fieldInputGroup with a search icon
An input with an action inside it, such as clearing or copyingInputGroup with a button addon
A plain valueInput
A search across the serverSearch

Anatomy

  • InputGroup: the bordered box. Required.
  • InputGroupAddon: an icon or a button at the start or end (align).
  • InputGroupAddon.Text: fixed text at the start or end, in Space Mono and foreground-hint.
  • InputGroupInput: the input itself, without a border of its own. Required.

Variants

VariantUse for
Addon variant="default"A light mark inside the field: a search icon, a keyboard hint, a clear button
Addon variant="container"Part of the value's structure: a protocol, a domain, a unit. It sits on fill-muted, separated from the input by a hairline

States

  • Put data-invalid and disabled on InputGroupInput. The group draws them: a danger-strong border when invalid, the shared disabled look when disabled (States).
  • The focus ring goes around the whole group (States).

Behavior

  • In a search field, put an 18px search icon at the start, and a clear button at the end once there is text.
  • A Button in an end addon is a control embedded in the field: 20px on a desktop and 32px on a phone, with radius-chip and a 16px icon. When it is the addon's last child it sits 6px from the field's end, as far as from its top and bottom; put a hint such as Esc before it, not after (Shape).
  • A text addon takes at most half the group and truncates past that, with its whole text as its title, so there is always room to type (Forms).

Accessibility

InputGroupInput wraps Base UI Input; the group itself is a plain <div>.

  • Name the input with a FieldLabel (Field), or with aria-label on a search field that has no visible label (Search).
  • Give a button addon its own aria-label (Clear Search).
  • Text addons are not read as part of the value. When the prefix matters for understanding the value, say it in the label or the help text.

API

InputGroup

接受其元素的全部属性。

InputGroupAddon

Prop类型默认值
align"inline-end" | "inline-start""inline-start"
variant"default" | "container""default"

Also takes the attributes of its element.

InputGroupInput

Prop类型默认值
suppressPasswordManagerAdd common password-manager ignore hints for non-credential fields where extension overlays would obscure custom UI.boolean
defaultValueThe default value of the input. Use when uncontrolled.string | number | readonly string[]
onValueChangeCallback fired when the `value` changes. Use when controlled.(value: string, eventDetails: BaseInput.ChangeEventDetails) => void
renderAllows you to replace the component's HTML element with a different tag, or compose it with another component.ReactElement | ((props, state) => ReactElement)
valueThe value of the input. Use when controlled.string | number | readonly string[]

Also takes the attributes of its element.

相关组件

改动

  • 0.10.0 · Breaking ChangesField frames (Input, Textarea, InputGroup, Select, Combobox, ComboboxSelect, Composer, option Card, SearchTrigger) are drawn at 1px in line-field instead of 1.5px, on the phone too.
  • 0.5.35 · ChangedInputGroup addon and text colours are driven by variables on the group root. A caller-provided text-colour class on those parts replaces their colour in every state, focus and disabled included.