x
1
2
3
4
5
<input type="text" value="coffee shops berlin" placeholder="coffee shops berlin" class="min-w-0 appearance-none border transition-colors placeholder:text-ink-faint focus:outline-none focus:ring-3 read-only:text-ink-muted disabled:cursor-not-allowed disabled:text-ink-faint text-ink bg-surface block w-full rounded-md text-sm font-sans border-line-strong hover:border-ink-faint focus:border-accent-line focus:ring-focus-ring read-only:border-line read-only:bg-surface-subtle read-only:hover:border-line disabled:border-line disabled:bg-surface-sunk h-9 px-2.5" aria-label="query" name="q">1
2
3
4
5
render InputComponent.new( size: size.to_sym, value: value.presence, placeholder: placeholder.presence, mono: mono, quiet: quiet, invalid: invalid, disabled: disabled, readonly: readonly, name: "q", aria: { label: "query" })The box at a size, driven from the sidebar. quiet and invalid are the two skins over the resting one; mono is the face the parameter table asks for.
| Param | Description | Input |
|---|---|---|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|
|
|
— |
|