Radio button
Radio button
Component demo
Interactive example
<ic-radio-groupname="radio-group-1"label="Add a free purchase with any hot drink"><ic-radio-optionvalue="crisps"label="Crisps"></ic-radio-option><ic-radio-optionvalue="cookie"label="Deluxe chocolate chip cookie (sold out)"disabled="true"></ic-radio-option><ic-radio-optionvalue="fruit"label="Banana"></ic-radio-option><ic-radio-optionvalue="No item"label="No thanks, just my coffee"></ic-radio-option></ic-radio-group>
<IcRadioGroupname='radio-group-1'label="Add a free purchase with any hot drink"onIcChange={(ev)=>console.log(ev.detail.value)}><IcRadioOptionvalue="crisps"label="Crisps"/><IcRadioOptionvalue="cookie"label="Deluxe chocolate chip cookie (sold out)"disabled/><IcRadioOptionvalue="fruit"label="Banana"/><IcRadioOptionvalue="No item"label="No thanks, just my coffee"/></IcRadioGroup>
Radio group details
Props
All components also accept native properties supported by the DOM, such asclassName
and
style
.
|
|
|
---|---|---|
|
The label for the radio group to be displayed. |
|
|
The name for the radio group to differentiate from other groups. |
|
|
If |
|
|
The helper text that will be displayed for additional field guidance. |
|
|
If |
|
|
The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the |
|
|
If |
|
|
The size of the radio group component. |
|
|
|
|
|
The validation status - e.g. 'error' | 'warning' | 'success'. |
|
|
The validation text - e.g. 'error' | 'warning' | 'success'. |
|
The label for the radio group to be displayed. |
The name for the radio group to differentiate from other groups. |
If |
The helper text that will be displayed for additional field guidance. |
If |
The orientation of the radio buttons in the radio group. If there are more than two radio buttons in a radio group or either of the radio buttons use the |
If |
The size of the radio group component. |
|
The validation status - e.g. 'error' | 'warning' | 'success'. |
The validation text - e.g. 'error' | 'warning' | 'success'. |
Events
All components also accept native events supported by the DOM, such as
onClick
and
onKeyDown
.
|
|
|
---|---|---|
|
|
|
|
Radio option details
Props
All components also accept native properties supported by the DOM, such asclassName
and
style
.
|
|
|
---|---|---|
|
The value for the radio option. |
|
|
The style of additionalField that will be displayed if used. |
|
|
If |
|
|
The text to be displayed when dynamic. |
|
|
The <form> element to associate the radio with. |
|
|
The URL that processes the information submitted by the radio. It overrides the action attribute of the radio's form owner. Does nothing if there is no form owner. |
|
|
The way the submitted form data is encoded. |
|
|
The HTTP method used to submit the form. |
|
|
If |
|
|
The place to display the response from submitting the form. It overrides the target attribute of the radio's form owner. |
|
|
The group label for the radio option. |
|
|
The label for the radio option. |
|
|
The name for the radio option. |
|
|
If |
|
The value for the radio option. |
The style of additionalField that will be displayed if used. |
If |
The text to be displayed when dynamic. |
The <form> element to associate the radio with. |
The URL that processes the information submitted by the radio. It overrides the action attribute of the radio's form owner. Does nothing if there is no form owner. |
The way the submitted form data is encoded. |
The HTTP method used to submit the form. |
If |
The place to display the response from submitting the form. It overrides the target attribute of the radio's form owner. |
The group label for the radio option. |
The label for the radio option. |
The name for the radio option. |
If |
Slots
A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.
Content can be slotted into a component by adding it as a top-level child of the component.
Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a
slot
attribute on the slotted content.
|
|
---|---|
|
|
|
Events
All components also accept native events supported by the DOM, such as
onClick
and
onKeyDown
.
|
|
|
---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
Methods
|
|
|
---|---|---|
|
|
|
|
Variants
Conditional
Interactive example
<ic-radio-groupname="radio-group-2"label="Do you have any special requests?"><ic-radio-optionvalue="request"label="Yes, I want to modify my order"><ic-text-fieldslot="additional-field"label="Please provide some additional information"placeholder="i.e Soya milk please"></ic-text-field></ic-radio-option><ic-radio-optionvalue="none"label="No, standard please"></ic-radio-option></ic-radio-group>
<IcRadioGrouplabel="Do you have any special requests?"name="radio-group-2"><IcRadioOptionvalue="request"label="Yes, I want to modify my order"><IcTextFieldslot="additional-field"label="Please provide some additional information"placeholder="i.e Soya milk please"/></IcRadioOption><IcRadioOptionvalue="none"label="No, standard please"/></IcRadioGroup>
Conditional dynamic
Interactive example
<ic-radio-groupname="radio-group-3"label="Do you have any special requests?"><ic-radio-optionvalue="request"label="Yes, I want to modify my order"additional-field-display="dynamic"><ic-text-fieldslot="additional-field"label="Please provide some additional information"placeholder="i.e Soya milk please"></ic-text-field></ic-radio-option><ic-radio-optionvalue="none"label="No, standard please"></ic-radio-option></ic-radio-group>
<IcRadioGroupname="radio-group-3"label="Do you have any special requests?"><IcRadioOptionvalue="request"label="Yes, I want to modify my order"additionalFieldDisplay="dynamic"><IcTextFieldslot="additional-field"label="Please provide some additional information"placeholder="i.e Soya milk please"/></IcRadioOption><IcRadioOptionvalue="none"label="No, standard please"/></IcRadioGroup>
With helper text
Interactive example
<ic-radio-grouplabel="Do you have any special requests?"helper-text="Let us know if you'd like an alternative to dairy milk."name="radio-group-4"><ic-radio-optionvalue="request"label="Yes, I want to modify my order"></ic-radio-option><ic-radio-optionvalue="none"label="No, standard please"></ic-radio-option></ic-radio-group>
<IcRadioGrouplabel="Do you have any special requests?"helperText="Let us know if you'd like an alternative to dairy milk."name='radio-group-4'><IcRadioOptionvalue="request"label="Yes, I want to modify my order"/><IcRadioOptionvalue="none"label="No, standard please"/></IcRadioGroup>
Size small
Interactive example
<ic-radio-grouplabel="Do you have any special requests?"name="radio-group-5"size="small"><ic-radio-optionvalue="request"label="Yes, I want to modify my order"></ic-radio-option><ic-radio-optionvalue="none"label="No, standard please"></ic-radio-option></ic-radio-group>
<IcRadioGrouplabel="Do you have any special requests?"name="radio-group-5"size="small"><IcRadioOptionvalue="request"label="Yes, I want to modify my order"/><IcRadioOptionvalue="none"label="No, standard please"/></IcRadioGroup>
With validation
Interactive example
<ic-radio-groupname="radio-group-6"label="Do you have any special requests?"validation-status="error"validation-text="An answer to this question is required"required="true"><ic-radio-optionvalue="request"label="Yes, I want to modify my order"></ic-radio-option><ic-radio-optionvalue="none"label="No, standard please"></ic-radio-option></ic-radio-group>
<IcRadioGroupname="radio-group-6"label="Do you have any special requests?"validationStatus="error"validationText="An answer to this question is required"required><IcRadioOptionvalue="request"label="Yes, I want to modify my order"/><IcRadioOptionvalue="none"label="No, standard please"/></IcRadioGroup>