Raft 设计系统
English

组件 · 输入

Input

A single-line text field at the control height, with a 1.5px ink border, for typing one value.

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

An input takes one line of text. It is as high as a default control, 44px on a phone and 32px on a desktop (Spacing), with a 1.5px ink border (line-field, as wide as a button's) on layer-card, and it always sits in a Field that gives it a label above and help text below. Inputs with a prefix or suffix, multi-line fields and search fields use the same box.

input/compositions/preview

When to use

SituationUse
One line of text: a name, an email, a URLInput
One line with a fixed prefix or suffix (a domain, #, a unit), or a search fieldInputGroup
Several lines of text in a formTextarea
A message to sendComposer
One value from a listSelect

States

States follow States.

  • Invalid: data-invalid gives the input a danger-strong border. The message goes in the field (Field).
  • Disabled: disabled wins over invalid. A disabled input keeps the disabled border, because nobody can fix it.

Content

  • Write the placeholder as an example value (e.g. Wug), in foreground-hint. Never use it as the label: the label stays visible above the input.

Accessibility

Input wraps Base UI Input and renders a native <input>.

  • Name it with a FieldLabel (Field). Use aria-label only where no visible label fits, such as a compact toolbar.
  • data-invalid also sets aria-invalid.
  • Set suppressPasswordManager only on fields that are not credentials, where a password manager's overlay would cover the UI. Leave it off email and password fields.

Rules

  • Always draw the ink border. Don't make an input a filled gray box without one: the ink border is what marks it as a control (Color).
  • Set input text with the field tokens (text-field, font-field), never a size of your own: they keep it at 16px on a phone and a touch screen, where iOS zooms the page into a field with smaller text, and at the body size, 14px, on a desktop (from 768px with a mouse or trackpad; Typography).
  • Check the value when focus leaves the input or the form is submitted (Forms).

API

Input

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.4.0 · Breaking ChangesInvalid-state styling now keys off data-invalid instead of aria-invalid. Input, Textarea, and form controls style the error visual from data-invalid and mirror it to aria-invalid; passing aria-invalid alone no longer shows the error style. Update callers to pass data-invalid. ([b3786da](https://github.com/botiverse/rui/commit/b3786da))