Another suggestion would be to use a radio select field, set icons in the field settings, display those icons on the form, and then use some custom CSS to style the radio options.
If you still wanted to save the selected option into a text field, you can use record rules to set the text field value to the value of the radio select on submit.
Here’s a sample - https://timyoung.tadabase.io/button-populate-text-field#!/default
and the CSS
.tb-radio{
text-align:left;
}
/* General Settings Padding, border-radius, unselected or not hovered over color and border */
.tb-radio.radio-icon-btn {
padding: 2px 68px;
background-color: #fafafa;
border: 2px solid #e0e0e0;
border-radius: 12px;
}
/* Blue */
.tb-radio.radio-icon-btn:hover {
background-color: #e3f2fd; /* lighten-5 */
color: #42a5f5; /* lighten-1 */
border-color: #42a5f5; /* lighten-1 */
}
.tb-radio.radio-icon-btn.selected {
background-color: #e3f2fd; /* lighten-5 */
color: #1e88e5; /* darken-1 */
border-color: #1e88e5; /* darken-1 */
}
In the Data Builder. Open the field settings for a radio select field and choose your icons
And in the page builder, open the form and then open the radio select field settings and choose Show Icons
