> For the complete documentation index, see [llms.txt](https://docs.matestack.io/matestack-ui-core/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.matestack.io/matestack-ui-core/2.1.0/built-in-reactivity/reactive-forms/form-textarea-component-api.md).

# Textarea Component API

```ruby
matestack_form my_form_config do
  form_textarea key: :foo, #...
end
```

## Parameters

### key - required

Defines the key which should be used when posting the form data to the server.

### placeholder

Defines the placeholder.

### label

Defines the label which will be rendered right before the textarea tag. You can also use the `label` component in order to create more complex label structures.

### required

If set to true, HTML validations will be triggered on form submit.

### init

If given, this value will be the initial value of the input. If used in an edit form of a given ActiveRecord model, the init value will be automatically derived from the model itself.

## Custom Textarea

If you want to create your own textarea component, that's easily done since `v.1.3.0`.

* Create your own Ruby component:

`app/matestack/components/my_form_textarea.rb`

```ruby
class Components::MyFormTextarea < Matestack::Ui::VueJs::Components::Form::Textarea

  vue_name "my-form-textarea"

  # optionally add some data here, which will be accessible within your Vue.js component
  def vue_props
    {
      foo: "bar"
    }
  end

  def response
    # exactly one root element is required since this is a Vue.js component template
    div do
      label text: "my form textarea"
      textarea textarea_attributes
      render_errors
    end
  end

end
```

* Create the corresponding Vue.js component:

`app/matestack/componenst/my_form_textarea.js`

```javascript
Vue.component('my-form-textarea', {
  mixins: [MatestackUiCore.componentMixin, MatestackUiCore.formTextareaMixin],
  data() {
    return {};
  },
  methods: {
    afterInitialize: function(value){
      // optional: if you need to modify the initial value
      // use this.setValue(xyz) in order to change the value
      // this method can be used in other methods or mounted hook of this component as well!
      this.setValue(xyz)
    }
  },
  mounted: function(){
    // use/initialize any third party library here
    // you can access the default initial value via this.componentConfig["init_value"]
    // if you need to, you can access your own component config data which added
    // within the prepare method of the corresponding Ruby class
    // this.componentConfig["foo"] would be "bar" in this case
  }
});
```

* Don't forget to require the custom component JavaScript according to your JS setup!
* Finally, use it within a `matestack_form`:

```ruby
matestack_form some_form_config do
  Components::MyFormTextarea.(key: :foo)
end
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.matestack.io/matestack-ui-core/2.1.0/built-in-reactivity/reactive-forms/form-textarea-component-api.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.