Button Card Data List Detail Disclosure Divider Field Set Icon Button Icon Icon Select Inline Text Field Label Link Link Select Menu Modal Rich Text Box Section Select Tabs Tag Text Text Field Text Field With Prefix Toggle

Dimsum v2.0.0

An agentic component library for Ruby On Rails.

text-field.html.erb Copy snippet Copied!
1
<%= render TextFieldComponent.new(placeholder: "Placeholder", disabled: true, icon: "square") %>

Text Field

A responsive single-line text field with an optional caller-selected Central icon. Hover or focus a field to inspect its Figma hover surface.

Size
MD LG
Leading icon
Disabled
PropTypeDefault
value Input value (default none — empty field). String nil
placeholder Empty-state placeholder (default none). String nil
type input type — "text" (default), "email", "password", … String "text"
size One of SIZES: md (36px, default), lg (40px). The field intentionally fills its consumer-provided width. String "md"
disabled disables the input. Boolean false
icon Optional caller-selected Central icon name. Add the exact glyph in the consumer app with `node script/icons-central.mjs add <name>`, then pass that name here. TextField does not own a fixed icon fixture. String nil
**html_options extra HTML attributes (id, name, data-*, aria-*, class, …). Hash —

Contains

  • Icon