Back

radioButton()

Generates an HTML radio button for a form, based on a model object’s property. It can handle simple properties as well as nested properties through associations, making it ideal for forms that work with both individual objects and collections. You can customize the radio button with additional attributes, labels, and error handling options. It automatically reflects the object’s current property value, so if the property matches the tagValue, the radio button will be marked as checked. This function helps you build dynamic forms safely and easily, with support for encoding to prevent XSS attacks, error highlighting, and custom HTML wrapping. Note: Pass any additional arguments like class, rel, and id, and the generated tag will also include those values as HTML attributes.

Name Type Required Default Description
objectName any Yes The variable name of the object to build the form control for.
property string Yes The name of the property to use in the form control.
association string No The name of the association that the property is located on. Used for building nested forms that work with nested properties. If you are building a form with deep nesting, simply pass in a list to the nested object, and Wheels will figure it out.
position string No The position used when referencing a hasMany relationship in the association argument. Used for building nested forms that work with nested properties. If you are building a form with deep nestings, simply pass in a list of positions, and Wheels will figure it out.
tagValue string No The value of the radio button when selected.
label string No useDefaultLabel The label text to use in the form control.
labelPlacement string No around Whether to place the label before, after, or wrapped around the form control. Label text placement can be controlled using aroundLeft or aroundRight.
prepend string No String to prepend to the form control. Useful to wrap the form control with HTML tags.
append string No String to append to the form control. Useful to wrap the form control with HTML tags.
prependToLabel string No String to prepend to the form control's label. Useful to wrap the form control with HTML tags.
appendToLabel string No String to append to the form control's label. Useful to wrap the form control with HTML tags.
errorElement string No span HTML tag to wrap the form control with when the object contains errors.
errorClass string No field-with-errors The class name of the HTML tag that wraps the form control when there are errors.
encode any No true Use this argument to decide whether the output of the function should be encoded in order to prevent Cross Site Scripting (XSS) attacks. Set it to true to encode all relevant output for the specific HTML element in question (e.g. tag content, attribute values, and URLs). For HTML elements that have both tag content and attribute values you can set this argument to attributes to only encode attribute values and not tag content. 
1. Basic radio buttons for gender
<cfoutput>
<fieldset>
    <legend>Gender</legend>
    #radioButton(objectName="user", property="gender", tagValue="m", label="Male")#<br>
    #radioButton(objectName="user", property="gender", tagValue="f", label="Female")#
</fieldset>
</cfoutput>

2. Radio buttons for nested association (committee members)
<cfoutput>
<cfloop from="1" to="#ArrayLen(committee.members)#" index="i">
    <div>
        <h3>#committee.members[i].fullName#:</h3>
        <div>
            #radioButton(
                objectName="committee",
                association="members",
                position=i,
                property="gender",
                tagValue="m",
                label="Male"
            )#<br>
            #radioButton(
                objectName="committee",
                association="members",
                position=i,
                property="gender",
                tagValue="f",
                label="Female"
            )#
        </div>
    </div>
</cfloop>
</cfoutput>

3. Custom HTML wrapping and label placement
#radioButton(
    objectName="user",
    property="subscription",
    tagValue="premium",
    label="Premium Plan",
    prepend="<div class='radio-wrapper'>",
    append="</div>",
    labelPlacement="aroundRight"
)#
Copied!