Form Radio
The form_radio
component is Vue.js driven child component of the form
component and is used to collect user input.
All child components form_*
(including this component) have to be placed within the scope of the parent form
component, without any other Vue.js driven component like toggle
, async
creating a new scope between the child component and the parent form component! Non-Vue.js component can be placed between form
and form_*
without issues!
Parameters
key - required
Defines the key which should be used when posting the form data to the server.
options - required
Can either be an Array or Hash:
Array usage
will render:
Hash usage
will render:
The hash values will be used as values for the options, the keys as displayed values.
ActiveRecord Enum Mapping
If you want to use ActiveRecord enums as options for your radio input, you can use the enum class method:
disabled_values - optional
NOT IMPLEMENTED YET
init - optional
Defines the init value of the radio input. If mapped to an ActiveRecord model, the init value will be derived automatically from the model instance.
Pass in an Integer:
placeholder - optional
Defines the placeholder which will be rendered as first, disabled option.
label - optional
NOT IMPLEMENTED YET
You can also use the label
component in order to create a label for this input.
Custom Radio
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_radio.rb
Register your component:
app/matestack/components/registry.rb
Create the corresponding Vue.js component:
Generic code:
app/matestack/components/my_form_radio.js
Don't forget to require the custom component JavaScript according to your JS setup!
Finally, use it within a
form
:
Last updated