Text Field With Prefix
A text input with a static prefix, such as a protocol, fused to its left edge.
| Prop | Type | Default | Notes |
|---|---|---|---|
prefix |
String | required |
Static text shown before the input (e.g. "https://"). |
name |
String | nil |
Input `name` attribute. |
value |
String | nil |
Input value. |
placeholder |
String | nil |
Placeholder text. |
type |
String | "text" |
Input type — "text" (default), "email", "url", … |
disabled |
Boolean | false |
Disables the input. |
**html_options |
Hash | — | Extra HTML attributes (id, data-*, aria-*, class, …). |
Default
https://
1 | <%= render TextFieldWithPrefixComponent.new(prefix: "https://", name: "url", placeholder: "your-site.com") %> |
Disabled
https://
1 | <%= render TextFieldWithPrefixComponent.new(prefix: "https://", name: "url", value: "dimsum.dev", disabled: true) %> |
In field set
https://
We'll use this for backlinks.
1 | <%= render FieldSetComponent.new do |f| %> |
2 | <% f.with_label(text: "Website", for: "site_url") %> |
3 | <% f.with_field do %> |
4 | <%= render TextFieldWithPrefixComponent.new(prefix: "https://", name: "url", id: "site_url", placeholder: "your-site.com") %> |
5 | <% end %> |
6 | <% f.with_helptext { "We'll use this for backlinks." } %> |
7 | <% end %> |
With value
https://
1 | <%= render TextFieldWithPrefixComponent.new(prefix: "https://", name: "url", value: "dimsum.dev") %> |