Checkbox Component API

About Matestack Ui Core Matestack Ui VueJs Matestack Ui Bootstrap
Search…
The form_checkbox component is Vue.js driven child component of the form component and is used to collect user input.
1
matestack_form my_form_config do
2
  form_checkbox key: :status, #...
3
end
Copied!
Parameters
key - required
Defines the key which should be used when posting the form data to the server.
options
Can either be nil, an Array or Hash:
When not given
1
matestack_form my_form_config do
2
  form_checkbox key: :status, label: "Active"
3
end
Copied!
will render a single checkbox which can switch between true and false as value for the given key. Will be nil initially. The boolean value (or nil) will be sent to the server when submitting the form.
Array usage
1
matestack_form my_form_config do
2
  form_checkbox key: :status, options: [0, 1]
3
end
Copied!
will render a collection of checkboxes and their corresponding labels.
Multiple checkboxes can be selected. Data will be sent as an Array of selected values to the server when submitting the form.
Hash usage
1
matestack_form my_form_config do
2
  form_checkbox key: :status, options: { 'active': 1, 'deactive': 0 }
3
end
Copied!
will render a collection of checkboxes and their corresponding labels.
The hash values will be used as values for the checkboxes, the keys as displayed label values.
Multiple checkboxes can be selected. Data will be sent as an Array of selected values to the server when submitting the form.
ActiveRecord Enum Mapping
If you want to use ActiveRecord enums as options for your radio input, you can use the enum class method:
1
class Conversation < ActiveRecord::Base
2
  enum status: { active: 0, archived: 1 }
3
end
Copied!
1
matestack_form my_form_config do
2
  form_checkbox key: :status, options: Conversation.statuses
3
end
Copied!
Multiple checkboxes can be selected. Data will be sent as an Array of selected values to the server when submitting the form.
disabled_values
NOT IMPLEMENTED YET
init
NOT IMPLEMENTED YET
label
An applied label is only visible, when using a single checkbox without options.
You can also use the label component in order to create a label for this input.
Custom Checkbox
If you want to create your own radio component, that's easily done since v.1.3.0.
Create your own Ruby component:
app/matestack/components/my_form_checkbox.rb
1
class Components::MyFormCheckbox < Matestack::Ui::VueJs::Components::Form::Checkbox
2
​
3
  vue_name "my-form-checkbox"
4
​
5
  # optionally add some data here, which will be accessible within your Vue.js component
6
  def vue_props
7
    {
8
      foo: "bar"
9
    }
10
  end
11
​
12
  def response
13
    # exactly one root element is required since this is a Vue.js component template
14
    div class: "your-custom-markup" do
15
      render_options
16
      render_errors
17
    end
18
  end
19
​
20
end
Copied!
Create the corresponding Vue.js component:
Generic code:
app/matestack/components/my_form_checkbox.js
1
const myFormCheckbox = {
2
  mixins: [MatestackUiVueJs.componentMixin, MatestackUiVueJs.formCheckboxMixin],
3
  template: MatestackUiVueJs.componentHelpers.inlineTemplate,
4
  data() {
5
    return {};
6
  },
7
  methods: {
8
    afterInitialize: function(value){
9
      // optional: if you need to modify the initial value
10
      // use this.setValue(xyz) in order to change the value
11
      // this method can be used in other methods or mounted hook of this component as well!
12
      this.setValue(xyz)
13
    }
14
  },
15
  mounted: function(){
16
    // use/initialize any third party library here
17
    // you can access the default initial value via this.componentConfig["init_value"]
18
    // if you need to, you can access your own component config data which added
19
    // within the prepare method of the corresponding Ruby class
20
    // this.props["foo"] would be "bar" in this case
21
  }
22
}
23
​
24
export default myFormCheckbox
25
​
26
// and register in your application js file like:
27
appInstance.component('my-form-checkbox', myFormCheckbox) // register at appInstance
Copied!
Don't forget to require and register the custom component JavaScript according to your JS setup!
Finally, use it within a matestack_form:
1
matestack_form some_form_config do
2
  Components::MyFormCheckbox.call(key: :foo, options: [1,2,3])
3
end
Copied!
Textarea Component API
Select Component API
Last modified 4mo ago
Copy link
Contents