Radio Group
<gstock-radio-group>
|
GstockRadioGroup
Ejemplos
Help Text
Add descriptive help text to a radio group with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.
<gstock-radio-group label="Select an option" help-text="Choose the most appropriate option." name="a" value="1">
<gstock-radio label="Option 1" value="1"></gstock-radio>
<gstock-radio label="Option 2" value="2"></gstock-radio>
<gstock-radio label="Option 3" value="3"></gstock-radio>
</gstock-radio-group>Radio Buttons
Radio buttons offer an alternate way to display radio controls. In this case, an internal button group is used to group the buttons into a single, cohesive control.
<gstock-radio-group label="Select an option" help-text="Select an option that makes you proud." name="a" value="1">
<gstock-radio-button value="1">Option 1</gstock-radio-button>
<gstock-radio-button value="2">Option 2</gstock-radio-button>
<gstock-radio-button value="3">Option 3</gstock-radio-button>
</gstock-radio-group>Disabling Options
Radios and radio buttons can be disabled by adding the disabled attribute to the respective options inside the radio group.
<gstock-radio-group label="Select an option" name="a" value="1">
<gstock-radio label="Option 1" value="1"></gstock-radio>
<gstock-radio label="Option 2" value="2" disabled></gstock-radio>
<gstock-radio label="Option 3" value="3"></gstock-radio>
</gstock-radio-group>Sizing Options
The size of Radios and Radio Buttons will be determined by the Radio Group’s size attribute.
<gstock-radio-group label="Select an option" size="small">
<gstock-radio label="Option 1" value="option-1"></gstock-radio>
<gstock-radio label="Option 2" value="option-2"></gstock-radio>
<gstock-radio label="Option 3" value="option-3"></gstock-radio>
</gstock-radio-group>
<gstock-radio-group label="Select an option" size="medium">
<gstock-radio label="Option 1" value="option-1"></gstock-radio>
<gstock-radio label="Option 2" value="option-2"></gstock-radio>
<gstock-radio label="Option 3" value="option-3"></gstock-radio>
</gstock-radio-group>
<gstock-radio-group label="Select an option" size="large">
<gstock-radio label="Option 1" value="option-1"></gstock-radio>
<gstock-radio label="Option 2" value="option-2"></gstock-radio>
<gstock-radio label="Option 3" value="option-3"></gstock-radio>
</gstock-radio-group>Radios and Radio Buttons also have a size attribute. This can be useful in certain compositions, but it will be ignored when used inside of a Radio Group.
Validation
Setting the required attribute to make selecting an option mandatory. If a value has not been selected, it will prevent the form from submitting and display an error message.
<form class="validation">
<gstock-radio-group label="Select an option" name="a" required>
<gstock-radio label="Option 1" value="1"></gstock-radio>
<gstock-radio label="Option 2" value="2"></gstock-radio>
<gstock-radio label="Option 3" value="3"></gstock-radio>
</gstock-radio-group>
<br>
<gstock-button type="submit">Submit</gstock-button>
</form>
<script type="module">
const form = document.querySelector('.validation');
form.addEventListener('submit', event => {
event.preventDefault();
const formData = JSON.stringify(Object.fromEntries(new FormData(form)));
alert(`The field is valid!\n\n${formData}`);
});
</script>Custom Validity
Use the setCustomValidity() method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.
<form class="custom-validity">
<gstock-radio-group label="Select an option" name="a" value="1">
<gstock-radio label="Not me" value="1"></gstock-radio>
<gstock-radio label="Me neither" value="2"></gstock-radio>
<gstock-radio label="Choose me" value="3"></gstock-radio>
</gstock-radio-group>
<br>
<gstock-button type="submit">Submit</gstock-button>
</form>
<script type="module">
const form = document.querySelector('.custom-validity');
const radioGroup = form.querySelector('gstock-radio-group');
const errorMessage = 'You must choose the last option';
customElements.whenDefined('gstock-radio').then(() => {
radioGroup.setCustomValidity(errorMessage);
});
form.addEventListener('gstock-change-event', () => {
const isValid = radioGroup.value === '3';
radioGroup.setCustomValidity(isValid ? '' : errorMessage);
});
form.addEventListener('submit', event => {
event.preventDefault();
const formData = JSON.stringify(Object.fromEntries(new FormData(form)));
alert(`The field is valid!\n\n${formData}`);
});
</script>