Shadwire
Componentes

Textarea

Exibe uma área de texto ou um componente que se parece com uma área de texto.

Instalação

O Shadwire segue o modelo open-code do shadcn/ui: o código-fonte do componente é copiado para a sua aplicação e passa a ser seu. Instale com a CLI: 

shadwire add textarea --yes

O item textarea do registry instala estes arquivos:

  • app/components/ui_component.rb
  • app/components/ui/textarea_component.rb
  • app/helpers/ui/textarea_helper.rb
  • vendor/shadwire/shadwire.css

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

Use o helper ui_textarea em qualquer view. O bloco vira o valor inicial da área de texto. 

<%= ui_textarea(name: "post[body]", placeholder: "Digite sua mensagem") %>

Ou renderize o componente Ui::TextareaComponent diretamente: 

<%= render Ui::TextareaComponent.new(placeholder: "Digite sua mensagem") do %>
  Conteúdo inicial
<% end %>

Exemplos

Padrão

Uma área de texto com o visual shadcn; cresce com o conteúdo via field-sizing.

<%= ui_textarea(placeholder: "Digite sua mensagem aqui.", class: "max-w-sm") %>

Com label

Combine com ui_label para formulários acessíveis.

<div class="grid w-full max-w-sm gap-2">
  <%= ui_label(for: "textarea-message") { "Sua mensagem" } %>
  <%= ui_textarea(id: "textarea-message", placeholder: "Digite sua mensagem aqui.") %>
</div>

Desabilitado

Passe disabled: true como atributo HTML.

<%= ui_textarea(placeholder: "Desabilitado", disabled: true, class: "max-w-sm") %>

Referência da API

ui_textarea(**options, &block) encapsula Ui::TextareaComponent.new(**options).

Argumento Tipo Padrão Descrição
class / class_name String nil Classes extras, mescladas após as classes base.
**attrs Hash {} Atributos HTML livres (name, rows, placeholder, disabled, data:, aria:, …).
&block Block — Valor inicial da área de texto.