Radio Button - JavaScript
Radio Button
Struktur HTML
Section titled “Struktur HTML”
<fieldset class="ina-radio-input ina-radio-input--size-md ina-radio-input--orientation-vertical">
<div class="ina-radio-input__group">
<p class="ina-radio-input__main-label">
Choose an option
</p>
<div class="ina-radio-input__option">
<input
type="radio"
id="radio-option-1"
name="radio-options"
value="option1"
class="ina-radio-input__field"
/>
<label for="radio-option-1" class="ina-radio-input__option-label">
Option 1
</label>
</div>
<div class="ina-radio-input__option">
<input
type="radio"
id="radio-option-2"
name="radio-options"
value="option2"
class="ina-radio-input__field"
/>
<label for="radio-option-2" class="ina-radio-input__option-label">
Option 2
</label>
</div>
</div>
</fieldset>
Contoh Penggunaan
Section titled “Contoh Penggunaan”Contoh 1 - Basic RadioInput
Section titled “Contoh 1 - Basic RadioInput”Selected: option3
<div style="padding: 20px">
<fieldset
class="ina-radio-input ina-radio-input--size-md ina-radio-input--orientation-vertical"
id="radio-input-basic"
data-display-target="radio-input-basic-selected"
>
<div class="ina-radio-input__group">
<label class="ina-radio-input__main-label" for="radio-input-basic-label">
Choose an option
</label>
<div class="ina-radio-input__option">
<input
type="radio"
id="radio-input-basic-option1-0"
name="radio-input-basic-options"
value="option1"
class="ina-radio-input__field"
/>
<label for="radio-input-basic-option1-0" class="ina-radio-input__option-label">
Option 1
</label>
</div>
<div class="ina-radio-input__option">
<input
type="radio"
id="radio-input-basic-option2-1"
name="radio-input-basic-options"
value="option2"
class="ina-radio-input__field"
/>
<label for="radio-input-basic-option2-1" class="ina-radio-input__option-label">
Option 2
</label>
</div>
<div class="ina-radio-input__option">
<input
type="radio"
id="radio-input-basic-option3-2"
name="radio-input-basic-options"
value="option3"
class="ina-radio-input__field"
checked
/>
<label for="radio-input-basic-option3-2" class="ina-radio-input__option-label">
Option 3
</label>
</div>
</div>
</fieldset>
<p class="mt-2 text-sm text-[#6B7280]" id="radio-input-basic-selected">Selected: option3</p>
</div>
<script is:inline>
document.addEventListener('DOMContentLoaded', () => {
if (window.InaUI && typeof window.InaUI.initRadioButton === 'function') {
window.InaUI.initRadioButton();
}
});
document.addEventListener('astro:page-load', () => {
if (window.InaUI && typeof window.InaUI.initRadioButton === 'function') {
window.InaUI.initRadioButton();
}
});
</script>Contoh 2 - Orientation Variants
Section titled “Contoh 2 - Orientation Variants”<div style="padding: 20px">
<div style="display: flex; flex-direction: column; gap: 24px;">
<!-- Vertical Orientation -->
<fieldset
class="ina-radio-input ina-radio-input--size-md ina-radio-input--orientation-vertical"
id="radio-input-vertical"
>
<div class="ina-radio-input__group">
<label class="ina-radio-input__main-label" for="radio-input-vertical-label">
Vertical Orientation (Default)
</label>
<div class="ina-radio-input__option">
<input
type="radio"
id="radio-input-vertical-vertical-0"
name="radio-input-vertical-options"
value="vertical"
class="ina-radio-input__field"
/>
<label for="radio-input-vertical-vertical-0" class="ina-radio-input__option-label">
Vertical
</label>
</div>
<div class="ina-radio-input__option">
<input
type="radio"
id="radio-input-vertical-horizontal-1"
name="radio-input-vertical-options"
value="horizontal"
class="ina-radio-input__field"
checked
/>
<label for="radio-input-vertical-horizontal-1" class="ina-radio-input__option-label">
Horizontal
</label>
</div>
</div>
</fieldset>
<!-- Horizontal Orientation -->
<fieldset
class="ina-radio-input ina-radio-input--size-md ina-radio-input--orientation-horizontal"
id="radio-input-horizontal"
>
<div class="ina-radio-input__group">
<label class="ina-radio-input__main-label" for="radio-input-horizontal-label">
Horizontal Orientation
</label>
<div class="ina-radio-input__option">
<input
type="radio"
id="radio-input-horizontal-vertical-0"
name="radio-input-horizontal-options"
value="vertical"
class="ina-radio-input__field"
/>
<label for="radio-input-horizontal-vertical-0" class="ina-radio-input__option-label">
Vertical
</label>
</div>
<div class="ina-radio-input__option">
<input
type="radio"
id="radio-input-horizontal-horizontal-1"
name="radio-input-horizontal-options"
value="horizontal"
class="ina-radio-input__field"
checked
/>
<label for="radio-input-horizontal-horizontal-1" class="ina-radio-input__option-label">
Horizontal
</label>
</div>
</div>
</fieldset>
</div>
</div>Contoh 3 - Disabled States
Section titled “Contoh 3 - Disabled States”<div style="padding: 20px">
<div style="display: flex; flex-direction: column; gap: 24px;">
<!-- Disabled Unchecked -->
<fieldset
class="ina-radio-input ina-radio-input--size-md ina-radio-input--orientation-vertical ina-radio-input--disabled"
id="radio-input-disabled-unchecked"
disabled
>
<div class="ina-radio-input__group">
<label class="ina-radio-input__main-label" for="radio-input-disabled-unchecked-label">
Disabled Radio Input (Unchecked)
</label>
<div class="ina-radio-input__option ina-radio-input__option--disabled">
<input
type="radio"
id="radio-input-disabled-unchecked-opt1-0"
name="radio-input-disabled-unchecked-options"
value="opt1"
class="ina-radio-input__field"
disabled
/>
<label
for="radio-input-disabled-unchecked-opt1-0"
class="ina-radio-input__option-label ina-radio-input__option-label--disabled"
>
Option 1
</label>
</div>
<div class="ina-radio-input__option ina-radio-input__option--disabled">
<input
type="radio"
id="radio-input-disabled-unchecked-opt2-1"
name="radio-input-disabled-unchecked-options"
value="opt2"
class="ina-radio-input__field"
disabled
/>
<label
for="radio-input-disabled-unchecked-opt2-1"
class="ina-radio-input__option-label ina-radio-input__option-label--disabled"
>
Option 2
</label>
</div>
<div class="ina-radio-input__option ina-radio-input__option--disabled">
<input
type="radio"
id="radio-input-disabled-unchecked-opt3-2"
name="radio-input-disabled-unchecked-options"
value="opt3"
class="ina-radio-input__field"
disabled
/>
<label
for="radio-input-disabled-unchecked-opt3-2"
class="ina-radio-input__option-label ina-radio-input__option-label--disabled"
>
Option 3
</label>
</div>
</div>
</fieldset>
<!-- Disabled Checked -->
<fieldset
class="ina-radio-input ina-radio-input--size-md ina-radio-input--orientation-vertical ina-radio-input--disabled"
id="radio-input-disabled-checked"
disabled
>
<div class="ina-radio-input__group">
<label class="ina-radio-input__main-label" for="radio-input-disabled-checked-label">
Disabled Radio Input (Checked)
</label>
<div class="ina-radio-input__option ina-radio-input__option--disabled">
<input
type="radio"
id="radio-input-disabled-checked-opt1-0"
name="radio-input-disabled-checked-options"
value="opt1"
class="ina-radio-input__field"
disabled
/>
<label
for="radio-input-disabled-checked-opt1-0"
class="ina-radio-input__option-label ina-radio-input__option-label--disabled"
>
Option 1
</label>
</div>
<div class="ina-radio-input__option ina-radio-input__option--disabled">
<input
type="radio"
id="radio-input-disabled-checked-opt2-1"
name="radio-input-disabled-checked-options"
value="opt2"
class="ina-radio-input__field"
checked
disabled
/>
<label
for="radio-input-disabled-checked-opt2-1"
class="ina-radio-input__option-label ina-radio-input__option-label--disabled"
>
Option 2
</label>
</div>
<div class="ina-radio-input__option ina-radio-input__option--disabled">
<input
type="radio"
id="radio-input-disabled-checked-opt3-2"
name="radio-input-disabled-checked-options"
value="opt3"
class="ina-radio-input__field"
disabled
/>
<label
for="radio-input-disabled-checked-opt3-2"
class="ina-radio-input__option-label ina-radio-input__option-label--disabled"
>
Option 3
</label>
</div>
</div>
</fieldset>
</div>
</div>