Radio

Design

Code

Radio Usage

Example 1

Radio 1

Radio 2

Radio 3

<nile-radio-group  label="Select an option" name="options" value="2">
      <nile-radio name="test" value="1" label="Radio 1"> </nile-radio>
      <nile-radio name="test" value="2" label="Radio 2"> </nile-radio>
      <nile-radio name="test" value="3" label="Radio 3" > </nile-radio>
</nile-radio-group>

Example 2

Radio 1

Radio 2

Radio 3

Radio 4

<nile-radio-group  label="Disabled Option" name="options" >
     <nile-radio name="test" value="1" > Radio 1 </nile-radio>
     <nile-radio name="test" value="2" disabled islabelborder>Radio 2 </nile-radio>
     <nile-radio name="test" value="3"  disabled>Radio 3</nile-radio>
     <nile-radio name="test" value="4"  >Radio 4</nile-radio>
</nile-radio-group>

Example 3

Radio 1

Radio 2

Radio 3

Radio 4

<nile-radio-group  label="Disabled Option" name="options" islabelborder >
     <nile-radio name="test" value="1" > Radio 1 </nile-radio>
     <nile-radio name="test" value="2" disabled >Radio 2 </nile-radio>
     <nile-radio name="test" value="3"  disabled>Radio 3</nile-radio>
     <nile-radio name="test" value="4"  >Radio 4</nile-radio>
</nile-radio-group>

Attributes & Properties

Name	Description	Type	Default
value	Current value of the selected radio option	string	''
label	The select’s label. If you need to display HTML, use the label slot instead.	boolean	false
disabled	Makes the radio option disabled.	boolean	false

Events

Name	Description	Event Detail
nile-init	Emitted when the component connects.	-
nile-destroy	Emitted when the component disconnects.	-
nile-focus	Emitted when focuses	-
nile-blur	Emitted when component blurs	-

Slots

Name	Description
(default)	The Radio's label
label	The label helps the user understand the group of options provided and to make a selection.
label-suffix	The label suffix helps the user to understand more about the label.

dependencies

nile-radio