js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 20:19:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clean up react example

Browse Source
This commit is contained in:
Jeremiah Hoyet
2021-11-22 14:20:33 -05:00
parent 989e368fb4
commit dfaabeead2
1 changed files with 13 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
docs/components/radio-group.md
View File

@@ -60,9 +60,7 @@ Adding a `required` attribute to `sl-radio-group` will require at least one opti
<sl-radio value="2" name="foo">Option 2</sl-radio>
<sl-radio value="3" name="foo">Option 3</sl-radio>
</sl-radio-group>
<br />
<sl-button class="required-button">Validate Group</sl-button>
<script>
@@ -75,13 +73,20 @@ Adding a `required` attribute to `sl-radio-group` will require at least one opti
```jsx react
import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
const validateGroup = () => {
const group = document.querySelector('sl-radio-group.required-radio-group');
group.reportValidity();
}
const App = () => (
<SlRadioGroup label="Select an option" fieldset>
<SlRadio value="1" checked>Option 1</SlRadio>
<SlRadio value="2">Option 2</SlRadio>
<SlRadio value="3">Option 3</SlRadio>
</SlRadioGroup>
<>
<SlRadioGroup label="Select an option" fieldset required>
<SlRadio value="1" checked>Option 1</SlRadio>
<SlRadio value="2">Option 2</SlRadio>
<SlRadio value="3">Option 3</SlRadio>
</SlRadioGroup>
<br />
<sl-button class="required-button" onClick={()=> validateGroup()}>Validate Group</sl-button>
</>
);
```