kopia lustrzana https://github.com/shoelace-style/shoelace
update radio group, radio, radio buton
Cory LaViska
rodzic
4b7da8f510
commit
cea69beca9
|
|
@ -11,6 +11,8 @@
|
|||
"autoplay",
|
||||
"bezier",
|
||||
"boxicons",
|
||||
"callout",
|
||||
"callouts",
|
||||
"chatbubble",
|
||||
"checkmark",
|
||||
"claviska",
|
||||
|
|
@ -36,6 +38,7 @@
|
|||
"enterkeyhint",
|
||||
"eqeqeq",
|
||||
"erroneou",
|
||||
"errormessage",
|
||||
"esbuild",
|
||||
"exportparts",
|
||||
"fieldsets",
|
||||
|
|
@ -120,6 +123,7 @@
|
|||
"treeitem",
|
||||
"Triaging",
|
||||
"turbolinks",
|
||||
"typeof",
|
||||
"unbundles",
|
||||
"unbundling",
|
||||
"unicons",
|
||||
|
|
|
|||
|
|
@ -117,7 +117,7 @@
|
|||
method.parameters?.length
|
||||
? `
|
||||
<code>${escapeHtml(
|
||||
method.parameters.map(param => `${param.name}: ${param.type.text}`).join(', ')
|
||||
method.parameters.map(param => `${param.name}: ${param.type?.text || ''}`).join(', ')
|
||||
)}</code>
|
||||
`
|
||||
: '-'
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@ Radios buttons allow the user to select a single option from a group using a but
|
|||
Radio buttons are designed to be used with [radio groups](/components/radio-group). When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.
|
||||
|
||||
```html preview
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio-button name="a" value="1" checked>Option 1</sl-radio-button>
|
||||
<sl-radio-button name="a" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button name="a" value="3">Option 3</sl-radio-button>
|
||||
<sl-radio-group label="Select an option" name="a" value="1">
|
||||
<sl-radio-button value="1">Option 1</sl-radio-button>
|
||||
<sl-radio-button value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button value="3">Option 3</sl-radio-button>
|
||||
</sl-radio-group>
|
||||
```
|
||||
|
||||
|
|
@ -18,31 +18,25 @@ Radio buttons are designed to be used with [radio groups](/components/radio-grou
|
|||
import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadioButton name="option" value="1" checked>
|
||||
Option 1
|
||||
</SlRadioButton>
|
||||
<SlRadioButton name="option" value="2">
|
||||
Option 2
|
||||
</SlRadioButton>
|
||||
<SlRadioButton name="option" value="3">
|
||||
Option 3
|
||||
</SlRadioButton>
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
<SlRadioButton value="1">Option 1</SlRadioButton>
|
||||
<SlRadioButton value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton value="3">Option 3</SlRadioButton>
|
||||
</SlRadioGroup>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Checked
|
||||
### Checked States
|
||||
|
||||
To set the initial checked state, use the `checked` attribute.
|
||||
To set the initial value and checked state, use the `value` attribute on the containing radio group.
|
||||
|
||||
```html preview
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio-button name="option" value="1" checked>Option 1</sl-radio-button>
|
||||
<sl-radio-button name="option" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button name="option" value="3">Option 3</sl-radio-button>
|
||||
<sl-radio-group label="Select an option" name="a" value="1">
|
||||
<sl-radio-button value="1">Option 1</sl-radio-button>
|
||||
<sl-radio-button value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button value="3">Option 3</sl-radio-button>
|
||||
</sl-radio-group>
|
||||
```
|
||||
|
||||
|
|
@ -50,16 +44,10 @@ To set the initial checked state, use the `checked` attribute.
|
|||
import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadioButton name="option" value="1" checked>
|
||||
Option 1
|
||||
</SlRadioButton>
|
||||
<SlRadioButton name="option" value="2">
|
||||
Option 2
|
||||
</SlRadioButton>
|
||||
<SlRadioButton name="option" value="3">
|
||||
Option 3
|
||||
</SlRadioButton>
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
<SlRadioButton value="1">Option 1</SlRadioButton>
|
||||
<SlRadioButton value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton value="3">Option 3</SlRadioButton>
|
||||
</SlRadioGroup>
|
||||
);
|
||||
```
|
||||
|
|
@ -69,10 +57,10 @@ const App = () => (
|
|||
Use the `disabled` attribute to disable a radio button.
|
||||
|
||||
```html preview
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio-button name="option" value="1" checked>Option 1</sl-radio-button>
|
||||
<sl-radio-button name="option" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button name="option" value="3" disabled>Option 3</sl-radio-button>
|
||||
<sl-radio-group label="Select an option" name="a" value="1">
|
||||
<sl-radio-button value="1">Option 1</sl-radio-button>
|
||||
<sl-radio-button value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button value="3" disabled>Option 3</sl-radio-button>
|
||||
</sl-radio-group>
|
||||
```
|
||||
|
||||
|
|
@ -80,14 +68,10 @@ Use the `disabled` attribute to disable a radio button.
|
|||
import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadioButton name="option" value="1" checked>
|
||||
Option 1
|
||||
</SlRadioButton>
|
||||
<SlRadioButton name="option" value="2">
|
||||
Option 2
|
||||
</SlRadioButton>
|
||||
<SlRadioButton name="option" value="3" disabled>
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
<SlRadioButton value="1">Option 1</SlRadioButton>
|
||||
<SlRadioButton value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton value="3" disabled>
|
||||
Option 3
|
||||
</SlRadioButton>
|
||||
</SlRadioGroup>
|
||||
|
|
@ -99,26 +83,26 @@ const App = () => (
|
|||
Use the `size` attribute to change a radio button's size.
|
||||
|
||||
```html preview
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio-button size="small" name="option" value="1" checked>Option 1</sl-radio-button>
|
||||
<sl-radio-button size="small" name="option" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button size="small" name="option" value="3">Option 3</sl-radio-button>
|
||||
<sl-radio-group label="Select an option" name="a" value="1">
|
||||
<sl-radio-button size="small" value="1">Option 1</sl-radio-button>
|
||||
<sl-radio-button size="small" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button size="small" value="3">Option 3</sl-radio-button>
|
||||
</sl-radio-group>
|
||||
|
||||
<br />
|
||||
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio-button size="medium" name="option" value="1" checked>Option 1</sl-radio-button>
|
||||
<sl-radio-button size="medium" name="option" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button size="medium" name="option" value="3">Option 3</sl-radio-button>
|
||||
<sl-radio-group label="Select an option" name="a" value="1">
|
||||
<sl-radio-button size="medium" value="1">Option 1</sl-radio-button>
|
||||
<sl-radio-button size="medium" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button size="medium" value="3">Option 3</sl-radio-button>
|
||||
</sl-radio-group>
|
||||
|
||||
<br />
|
||||
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio-button size="large" name="option" value="1" checked>Option 1</sl-radio-button>
|
||||
<sl-radio-button size="large" name="option" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button size="large" name="option" value="3">Option 3</sl-radio-button>
|
||||
<sl-radio-group label="Select an option" name="a" value="1">
|
||||
<sl-radio-button size="large" value="1">Option 1</sl-radio-button>
|
||||
<sl-radio-button size="large" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button size="large" value="3">Option 3</sl-radio-button>
|
||||
</sl-radio-group>
|
||||
```
|
||||
|
||||
|
|
@ -126,26 +110,26 @@ Use the `size` attribute to change a radio button's size.
|
|||
import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadioButton size="small" name="option" value="1" checked>Option 1</SlRadioButton>
|
||||
<SlRadioButton size="small" name="option" value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton size="small" name="option" value="3">Option 3</SlRadioButton>
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
<SlRadioButton size="small" value="1">Option 1</SlRadioButton>
|
||||
<SlRadioButton size="small" value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton size="small" value="3">Option 3</SlRadioButton>
|
||||
</SlRadioGroup>
|
||||
|
||||
<br />
|
||||
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadioButton size="medium" name="option" value="1" checked>Option 1</SlRadioButton>
|
||||
<SlRadioButton size="medium" name="option" value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton size="medium" name="option" value="3">Option 3</SlRadioButton>
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
<SlRadioButton size="medium" value="1">Option 1</SlRadioButton>
|
||||
<SlRadioButton size="medium" value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton size="medium" value="3">Option 3</SlRadioButton>
|
||||
</SlRadioGroup>
|
||||
|
||||
<br />
|
||||
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadioButton size="large" name="option" value="1" checked>Option 1</SlRadioButton>
|
||||
<SlRadioButton size="large" name="option" value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton size="large" name="option" value="3">Option 3</SlRadioButton>
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
<SlRadioButton size="large" value="1">Option 1</SlRadioButton>
|
||||
<SlRadioButton size="large" value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton size="large" value="3">Option 3</SlRadioButton>
|
||||
</SlRadioGroup>
|
||||
);
|
||||
```
|
||||
|
|
@ -155,26 +139,26 @@ const App = () => (
|
|||
Use the `pill` attribute to give radio buttons rounded edges.
|
||||
|
||||
```html preview
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio-button pill size="small" name="option" value="1" checked>Option 1</sl-radio-button>
|
||||
<sl-radio-button pill size="small" name="option" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button pill size="small" name="option" value="3">Option 3</sl-radio-button>
|
||||
<sl-radio-group label="Select an option" name="a" value="1">
|
||||
<sl-radio-button pill size="small" value="1">Option 1</sl-radio-button>
|
||||
<sl-radio-button pill size="small" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button pill size="small" value="3">Option 3</sl-radio-button>
|
||||
</sl-radio-group>
|
||||
|
||||
<br />
|
||||
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio-button pill size="medium" name="option" value="1" checked>Option 1</sl-radio-button>
|
||||
<sl-radio-button pill size="medium" name="option" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button pill size="medium" name="option" value="3">Option 3</sl-radio-button>
|
||||
<sl-radio-group label="Select an option" name="a" value="1">
|
||||
<sl-radio-button pill size="medium" value="1">Option 1</sl-radio-button>
|
||||
<sl-radio-button pill size="medium" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button pill size="medium" value="3">Option 3</sl-radio-button>
|
||||
</sl-radio-group>
|
||||
|
||||
<br />
|
||||
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio-button pill size="large" name="option" value="1" checked>Option 1</sl-radio-button>
|
||||
<sl-radio-button pill size="large" name="option" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button pill size="large" name="option" value="3">Option 3</sl-radio-button>
|
||||
<sl-radio-group label="Select an option" name="a" value="1">
|
||||
<sl-radio-button pill size="large" value="1">Option 1</sl-radio-button>
|
||||
<sl-radio-button pill size="large" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button pill size="large" value="3">Option 3</sl-radio-button>
|
||||
</sl-radio-group>
|
||||
```
|
||||
|
||||
|
|
@ -182,26 +166,26 @@ Use the `pill` attribute to give radio buttons rounded edges.
|
|||
import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadioButton pill size="small" name="option" value="1" checked>Option 1</SlRadioButton>
|
||||
<SlRadioButton pill size="small" name="option" value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton pill size="small" name="option" value="3">Option 3</SlRadioButton>
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
<SlRadioButton pill size="small" value="1">Option 1</SlRadioButton>
|
||||
<SlRadioButton pill size="small" value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton pill size="small" value="3">Option 3</SlRadioButton>
|
||||
</SlRadioGroup>
|
||||
|
||||
<br />
|
||||
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadioButton pill size="medium" name="option" value="1" checked>Option 1</SlRadioButton>
|
||||
<SlRadioButton pill size="medium" name="option" value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton pill size="medium" name="option" value="3">Option 3</SlRadioButton>
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
<SlRadioButton pill size="medium" value="1">Option 1</SlRadioButton>
|
||||
<SlRadioButton pill size="medium" value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton pill size="medium" value="3">Option 3</SlRadioButton>
|
||||
</SlRadioGroup>
|
||||
|
||||
<br />
|
||||
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadioButton pill size="large" name="option" value="1" checked>Option 1</SlRadioButton>
|
||||
<SlRadioButton pill size="large" name="option" value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton pill size="large" name="option" value="3">Option 3</SlRadioButton>
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
<SlRadioButton pill size="large" value="1">Option 1</SlRadioButton>
|
||||
<SlRadioButton pill size="large" value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton pill size="large" value="3">Option 3</SlRadioButton>
|
||||
</SlRadioGroup>
|
||||
);
|
||||
```
|
||||
|
|
@ -211,18 +195,18 @@ const App = () => (
|
|||
Use the `prefix` and `suffix` slots to add icons.
|
||||
|
||||
```html preview
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio-button name="a" value="1" checked>
|
||||
<sl-radio-group label="Select an option" name="a" value="1">
|
||||
<sl-radio-button value="1">
|
||||
<sl-icon slot="prefix" name="archive"></sl-icon>
|
||||
Option 1
|
||||
</sl-radio-button>
|
||||
|
||||
<sl-radio-button name="a" value="2">
|
||||
<sl-radio-button value="2">
|
||||
<sl-icon slot="suffix" name="bag"></sl-icon>
|
||||
Option 2
|
||||
</sl-radio-button>
|
||||
|
||||
<sl-radio-button name="a" value="3">
|
||||
<sl-radio-button value="3">
|
||||
<sl-icon slot="prefix" name="gift"></sl-icon>
|
||||
<sl-icon slot="suffix" name="cart"></sl-icon>
|
||||
Option 3
|
||||
|
|
@ -234,18 +218,18 @@ Use the `prefix` and `suffix` slots to add icons.
|
|||
import { SlIcon, SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadioButton name="a" value="1" checked>
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
<SlRadioButton value="1">
|
||||
<SlIcon slot="prefix" name="archive" />
|
||||
Option 1
|
||||
</SlRadioButton>
|
||||
|
||||
<SlRadioButton name="a" value="2">
|
||||
<SlRadioButton value="2">
|
||||
<SlIcon slot="suffix" name="bag" />
|
||||
Option 2
|
||||
</SlRadioButton>
|
||||
|
||||
<SlRadioButton name="a" value="3">
|
||||
<SlRadioButton value="3">
|
||||
<SlIcon slot="prefix" name="gift" />
|
||||
<SlIcon slot="suffix" name="cart" />
|
||||
Option 3
|
||||
|
|
@ -259,24 +243,24 @@ const App = () => (
|
|||
You can omit button labels and use icons instead. Make sure to set a `label` attribute on each icon so screen readers will announce each option correctly.
|
||||
|
||||
```html preview
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio-button name="a" value="angry">
|
||||
<sl-radio-group label="Select an option" name="a" value="neutral">
|
||||
<sl-radio-button value="angry">
|
||||
<sl-icon name="emoji-angry" label="Angry"></sl-icon>
|
||||
</sl-radio-button>
|
||||
|
||||
<sl-radio-button name="a" value="sad">
|
||||
<sl-radio-button value="sad">
|
||||
<sl-icon name="emoji-frown" label="Sad"></sl-icon>
|
||||
</sl-radio-button>
|
||||
|
||||
<sl-radio-button name="a" value="neutral" checked>
|
||||
<sl-radio-button value="neutral">
|
||||
<sl-icon name="emoji-neutral" label="Neutral"></sl-icon>
|
||||
</sl-radio-button>
|
||||
|
||||
<sl-radio-button name="a" value="happy">
|
||||
<sl-radio-button value="happy">
|
||||
<sl-icon name="emoji-smile" label="Happy"></sl-icon>
|
||||
</sl-radio-button>
|
||||
|
||||
<sl-radio-button name="a" value="laughing">
|
||||
<sl-radio-button value="laughing">
|
||||
<sl-icon name="emoji-laughing" label="Laughing"></sl-icon>
|
||||
</sl-radio-button>
|
||||
</sl-radio-group>
|
||||
|
|
@ -286,101 +270,28 @@ You can omit button labels and use icons instead. Make sure to set a `label` att
|
|||
import { SlIcon, SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadioButton name="a" value="angry">
|
||||
<SlRadioGroup label="Select an option" name="a" value="neutral">
|
||||
<SlRadioButton value="angry">
|
||||
<SlIcon name="emoji-angry" label="Angry" />
|
||||
</SlRadioButton>
|
||||
|
||||
<SlRadioButton name="a" value="sad">
|
||||
<SlRadioButton value="sad">
|
||||
<SlIcon name="emoji-frown" label="Sad" />
|
||||
</SlRadioButton>
|
||||
|
||||
<SlRadioButton name="a" value="neutral" checked>
|
||||
<SlRadioButton value="neutral">
|
||||
<SlIcon name="emoji-neutral" label="Neutral" />
|
||||
</SlRadioButton>
|
||||
|
||||
<SlRadioButton name="a" value="happy">
|
||||
<SlRadioButton value="happy">
|
||||
<SlIcon name="emoji-smile" label="Happy" />
|
||||
</SlRadioButton>
|
||||
|
||||
<SlRadioButton name="a" value="laughing">
|
||||
<SlRadioButton value="laughing">
|
||||
<SlIcon name="emoji-laughing" label="Laughing" />
|
||||
</SlRadioButton>
|
||||
</SlRadioGroup>
|
||||
);
|
||||
```
|
||||
|
||||
### 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.
|
||||
|
||||
```html preview
|
||||
<form class="custom-validity">
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio-button name="a" value="1" checked>Not me</sl-radio-button>
|
||||
<sl-radio-button name="a" value="2">Me neither</sl-radio-button>
|
||||
<sl-radio-button name="a" value="3">Choose me</sl-radio-button>
|
||||
</sl-radio-group>
|
||||
<br />
|
||||
<sl-button type="submit" variant="primary">Submit</sl-button>
|
||||
</form>
|
||||
<script>
|
||||
const form = document.querySelector('.custom-validity');
|
||||
const radioButton = form.querySelectorAll('sl-radio-button')[2];
|
||||
const errorMessage = 'You must choose this option';
|
||||
// Set initial validity as soon as the element is defined
|
||||
customElements.whenDefined('sl-radio-button').then(() => {
|
||||
radioButton.setCustomValidity(errorMessage);
|
||||
});
|
||||
// Update validity when a selection is made
|
||||
form.addEventListener('sl-change', () => {
|
||||
const isValid = radioButton.checked;
|
||||
radioButton.setCustomValidity(isValid ? '' : errorMessage);
|
||||
});
|
||||
// Handle form submit
|
||||
form.addEventListener('submit', event => {
|
||||
event.preventDefault();
|
||||
alert('All fields are valid!');
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { SlButton, SlIcon, SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
const App = () => {
|
||||
const radio = useRef(null);
|
||||
const errorMessage = 'You must choose this option';
|
||||
function handleChange(event) {
|
||||
radio.current.setCustomValidity(radio.current.checked ? '' : errorMessage);
|
||||
}
|
||||
function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
alert('All fields are valid!');
|
||||
}
|
||||
useEffect(() => {
|
||||
radio.current.setCustomValidity(errorMessage);
|
||||
}, []);
|
||||
return (
|
||||
<form class="custom-validity" onSubmit={handleSubmit}>
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadioButton name="a" value="1" checked onSlChange={handleChange}>
|
||||
Not me
|
||||
</SlRadioButton>
|
||||
<SlRadioButton name="a" value="2" onSlChange={handleChange}>
|
||||
Me neither
|
||||
</SlRadioButton>
|
||||
<SlRadioButton ref={radio} name="a" value="3" onSlChange={handleChange}>
|
||||
Choose me
|
||||
</SlRadioButton>
|
||||
</SlRadioGroup>
|
||||
<br />
|
||||
<SlButton type="submit" variant="primary">
|
||||
Submit
|
||||
</SlButton>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
[component-metadata:sl-radio-button]
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
|
||||
|
||||
```html preview
|
||||
<sl-radio-group label="Select an option" value="1">
|
||||
<sl-radio-group label="Select an option" name="a" value="1">
|
||||
<sl-radio value="1">Option 1</sl-radio>
|
||||
<sl-radio value="2">Option 2</sl-radio>
|
||||
<sl-radio value="3">Option 3</sl-radio>
|
||||
|
|
@ -16,7 +16,7 @@ Radio groups are used to group multiple [radios](/components/radio) or [radio bu
|
|||
import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option" value="1">
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
<SlRadio value="1">Option 1</SlRadio>
|
||||
<SlRadio value="2">Option 2</SlRadio>
|
||||
<SlRadio value="3">Option 3</SlRadio>
|
||||
|
|
@ -31,10 +31,10 @@ const App = () => (
|
|||
You can show the fieldset and legend that wraps the radio group using the `fieldset` attribute. If you don't use this option, you should still provide a label so screen readers announce the control correctly.
|
||||
|
||||
```html preview
|
||||
<sl-radio-group label="Select an option" value="1" fieldset>
|
||||
<sl-radio name="option" value="1">Option 1</sl-radio>
|
||||
<sl-radio name="option" value="2">Option 2</sl-radio>
|
||||
<sl-radio name="option" value="3">Option 3</sl-radio>
|
||||
<sl-radio-group label="Select an option" name="a" value="1" fieldset>
|
||||
<sl-radio value="1">Option 1</sl-radio>
|
||||
<sl-radio value="2">Option 2</sl-radio>
|
||||
<sl-radio value="3">Option 3</sl-radio>
|
||||
</sl-radio-group>
|
||||
```
|
||||
|
||||
|
|
@ -42,16 +42,10 @@ You can show the fieldset and legend that wraps the radio group using the `field
|
|||
import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option" value="1" fieldset>
|
||||
<SlRadio name="option" value="1">
|
||||
Option 1
|
||||
</SlRadio>
|
||||
<SlRadio name="option" value="2">
|
||||
Option 2
|
||||
</SlRadio>
|
||||
<SlRadio name="option" value="3">
|
||||
Option 3
|
||||
</SlRadio>
|
||||
<SlRadioGroup label="Select an option" name="a" value="1" fieldset>
|
||||
<SlRadio value="1">Option 1</SlRadio>
|
||||
<SlRadio value="2">Option 2</SlRadio>
|
||||
<SlRadio value="3">Option 3</SlRadio>
|
||||
</SlRadioGroup>
|
||||
);
|
||||
```
|
||||
|
|
@ -61,10 +55,10 @@ const App = () => (
|
|||
[Radio buttons](/components/radio-button) offer an alternate way to display radio controls. In this case, an internal [button group](/components/button-group) is used to group the buttons into a single, cohesive control.
|
||||
|
||||
```html preview
|
||||
<sl-radio-group label="Select an option" value="1">
|
||||
<sl-radio-button name="option" value="1">Option 1</sl-radio-button>
|
||||
<sl-radio-button name="option" value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button name="option" value="3">Option 3</sl-radio-button>
|
||||
<sl-radio-group label="Select an option" name="a" value="1">
|
||||
<sl-radio-button value="1">Option 1</sl-radio-button>
|
||||
<sl-radio-button value="2">Option 2</sl-radio-button>
|
||||
<sl-radio-button value="3">Option 3</sl-radio-button>
|
||||
</sl-radio-group>
|
||||
```
|
||||
|
||||
|
|
@ -72,16 +66,10 @@ const App = () => (
|
|||
import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option" value="1">
|
||||
<SlRadioButton name="option" value="1">
|
||||
Option 1
|
||||
</SlRadioButton>
|
||||
<SlRadioButton name="option" value="2">
|
||||
Option 2
|
||||
</SlRadioButton>
|
||||
<SlRadioButton name="option" value="3">
|
||||
Option 3
|
||||
</SlRadioButton>
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
<SlRadioButton value="1">Option 1</SlRadioButton>
|
||||
<SlRadioButton value="2">Option 2</SlRadioButton>
|
||||
<SlRadioButton value="3">Option 3</SlRadioButton>
|
||||
</SlRadioGroup>
|
||||
);
|
||||
```
|
||||
|
|
@ -92,10 +80,10 @@ Setting the `required` attribute to make selecting an option mandatory. If a val
|
|||
|
||||
```html preview
|
||||
<form class="validation">
|
||||
<sl-radio-group label="Select an option" required>
|
||||
<sl-radio name="a" value="1">Option 1</sl-radio>
|
||||
<sl-radio name="a" value="2">Option 2</sl-radio>
|
||||
<sl-radio name="a" value="3">Option 3</sl-radio>
|
||||
<sl-radio-group label="Select an option" name="a" required>
|
||||
<sl-radio value="1">Option 1</sl-radio>
|
||||
<sl-radio value="2">Option 2</sl-radio>
|
||||
<sl-radio value="3">Option 3</sl-radio>
|
||||
</sl-radio-group>
|
||||
<br />
|
||||
<sl-button type="submit" variant="primary">Submit</sl-button>
|
||||
|
|
@ -122,14 +110,14 @@ const App = () => {
|
|||
|
||||
return (
|
||||
<form class="custom-validity" onSubmit={handleSubmit}>
|
||||
<SlRadioGroup label="Select an option" onSlChange={handleChange} required>
|
||||
<SlRadio name="a" value="1">
|
||||
<SlRadioGroup label="Select an option" name="a" required onSlChange={handleChange}>
|
||||
<SlRadio value="1">
|
||||
Option 1
|
||||
</SlRadio>
|
||||
<SlRadio name="a" value="2">
|
||||
<SlRadiovalue="2">
|
||||
Option 2
|
||||
</SlRadio>
|
||||
<SlRadio name="a" value="3">
|
||||
<SlRadio value="3">
|
||||
Option 3
|
||||
</SlRadio>
|
||||
</SlRadioGroup>
|
||||
|
|
@ -148,10 +136,10 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
|
|||
|
||||
```html preview
|
||||
<form class="custom-validity">
|
||||
<sl-radio-group label="Select an option" value="1">
|
||||
<sl-radio name="a" value="1">Not me</sl-radio>
|
||||
<sl-radio name="a" value="2">Me neither</sl-radio>
|
||||
<sl-radio name="a" value="3">Choose me</sl-radio>
|
||||
<sl-radio-group label="Select an option" name="a" value="1">
|
||||
<sl-radio value="1">Not me</sl-radio>
|
||||
<sl-radio value="2">Me neither</sl-radio>
|
||||
<sl-radio value="3">Choose me</sl-radio>
|
||||
</sl-radio-group>
|
||||
<br />
|
||||
<sl-button type="submit" variant="primary">Submit</sl-button>
|
||||
|
|
@ -203,16 +191,10 @@ const App = () => {
|
|||
|
||||
return (
|
||||
<form class="custom-validity" onSubmit={handleSubmit}>
|
||||
<SlRadioGroup ref={radioGroup} label="Select an option" value="1" onSlChange={handleChange}>
|
||||
<SlRadio name="a" value="1">
|
||||
Not me
|
||||
</SlRadio>
|
||||
<SlRadio name="a" value="2">
|
||||
Me neither
|
||||
</SlRadio>
|
||||
<SlRadio name="a" value="3">
|
||||
Choose me
|
||||
</SlRadio>
|
||||
<SlRadioGroup ref={radioGroup} label="Select an option" name="a" value="1" onSlChange={handleChange}>
|
||||
<SlRadio value="1">Not me</SlRadio>
|
||||
<SlRadio value="2">Me neither</SlRadio>
|
||||
<SlRadio value="3">Choose me</SlRadio>
|
||||
</SlRadioGroup>
|
||||
<br />
|
||||
<SlButton type="submit" variant="primary">
|
||||
|
|
|
|||
|
|
@ -7,10 +7,10 @@ Radios allow the user to select a single option from a group.
|
|||
Radios are designed to be used with [radio groups](/components/radio-group).
|
||||
|
||||
```html preview
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio name="option" value="1" checked>Option 1</sl-radio>
|
||||
<sl-radio name="option" value="2">Option 2</sl-radio>
|
||||
<sl-radio name="option" value="3">Option 3</sl-radio>
|
||||
<sl-radio-group label="Select an option" name="a" value="1">
|
||||
<sl-radio value="1">Option 1</sl-radio>
|
||||
<sl-radio value="2">Option 2</sl-radio>
|
||||
<sl-radio value="3">Option 3</sl-radio>
|
||||
</sl-radio-group>
|
||||
```
|
||||
|
||||
|
|
@ -18,16 +18,10 @@ Radios are designed to be used with [radio groups](/components/radio-group).
|
|||
import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadio name="option" value="1" checked>
|
||||
Option 1
|
||||
</SlRadio>
|
||||
<SlRadio name="option" value="2">
|
||||
Option 2
|
||||
</SlRadio>
|
||||
<SlRadio name="option" value="3">
|
||||
Option 3
|
||||
</SlRadio>
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
<SlRadio value="1">Option 1</SlRadio>
|
||||
<SlRadio value="2">Option 2</SlRadio>
|
||||
<SlRadio value="3">Option 3</SlRadio>
|
||||
</SlRadioGroup>
|
||||
);
|
||||
```
|
||||
|
|
@ -36,15 +30,15 @@ const App = () => (
|
|||
|
||||
## Examples
|
||||
|
||||
### Checked
|
||||
### Initial Value
|
||||
|
||||
To set the initial checked state, use the `checked` attribute.
|
||||
To set the initial value and checked state, use the `value` attribute on the containing radio group.
|
||||
|
||||
```html preview
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio name="option" value="1" checked>Option 1</sl-radio>
|
||||
<sl-radio name="option" value="2">Option 2</sl-radio>
|
||||
<sl-radio name="option" value="3">Option 3</sl-radio>
|
||||
<sl-radio-group label="Select an option" name="a" value="1">
|
||||
<sl-radio value="1">Option 1</sl-radio>
|
||||
<sl-radio value="2">Option 2</sl-radio>
|
||||
<sl-radio value="3">Option 3</sl-radio>
|
||||
</sl-radio-group>
|
||||
```
|
||||
|
||||
|
|
@ -52,16 +46,10 @@ To set the initial checked state, use the `checked` attribute.
|
|||
import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadio name="option" value="1" checked>
|
||||
Option 1
|
||||
</SlRadio>
|
||||
<SlRadio name="option" value="2">
|
||||
Option 2
|
||||
</SlRadio>
|
||||
<SlRadio name="option" value="3">
|
||||
Option 3
|
||||
</SlRadio>
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
<SlRadio value="1">Option 1</SlRadio>
|
||||
<SlRadio value="2">Option 2</SlRadio>
|
||||
<SlRadio value="3">Option 3</SlRadio>
|
||||
</SlRadioGroup>
|
||||
);
|
||||
```
|
||||
|
|
@ -71,10 +59,10 @@ const App = () => (
|
|||
Use the `disabled` attribute to disable a radio.
|
||||
|
||||
```html preview
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio name="option" value="1" checked>Option 1</sl-radio>
|
||||
<sl-radio name="option" value="2">Option 2</sl-radio>
|
||||
<sl-radio name="option" value="3" disabled>Option 3</sl-radio>
|
||||
<sl-radio-group label="Select an option" name="a" value="1">
|
||||
<sl-radio value="1">Option 1</sl-radio>
|
||||
<sl-radio value="2">Option 2</sl-radio>
|
||||
<sl-radio value="3" disabled>Option 3</sl-radio>
|
||||
</sl-radio-group>
|
||||
```
|
||||
|
||||
|
|
@ -82,91 +70,14 @@ Use the `disabled` attribute to disable a radio.
|
|||
import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadio name="option" value="1" checked>
|
||||
Option 1
|
||||
</SlRadio>
|
||||
<SlRadio name="option" value="2">
|
||||
Option 2
|
||||
</SlRadio>
|
||||
<SlRadio name="option" value="3" disabled>
|
||||
<SlRadioGroup label="Select an option" name="a" value="1">
|
||||
<SlRadio value="1">Option 1</SlRadio>
|
||||
<SlRadio value="2">Option 2</SlRadio>
|
||||
<SlRadio value="3" disabled>
|
||||
Option 3
|
||||
</SlRadio>
|
||||
</SlRadioGroup>
|
||||
);
|
||||
```
|
||||
|
||||
### 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.
|
||||
|
||||
```html preview
|
||||
<form class="custom-validity">
|
||||
<sl-radio-group label="Select an option">
|
||||
<sl-radio name="a" value="1" checked>Not me</sl-radio>
|
||||
<sl-radio name="a" value="2">Me neither</sl-radio>
|
||||
<sl-radio name="a" value="3">Choose me</sl-radio>
|
||||
</sl-radio-group>
|
||||
<br />
|
||||
<sl-button type="submit" variant="primary">Submit</sl-button>
|
||||
</form>
|
||||
<script>
|
||||
const form = document.querySelector('.custom-validity');
|
||||
const radio = form.querySelectorAll('sl-radio')[2];
|
||||
const errorMessage = 'You must choose this option';
|
||||
// Set initial validity as soon as the element is defined
|
||||
customElements.whenDefined('sl-radio').then(() => {
|
||||
radio.setCustomValidity(errorMessage);
|
||||
});
|
||||
// Update validity when a selection is made
|
||||
form.addEventListener('sl-change', () => {
|
||||
const isValid = radio.checked;
|
||||
radio.setCustomValidity(isValid ? '' : errorMessage);
|
||||
});
|
||||
// Handle form submit
|
||||
form.addEventListener('submit', event => {
|
||||
event.preventDefault();
|
||||
alert('All fields are valid!');
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
```jsx react
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { SlButton, SlIcon, SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';
|
||||
const App = () => {
|
||||
const radio = useRef(null);
|
||||
const errorMessage = 'You must choose this option';
|
||||
function handleChange(event) {
|
||||
radio.current.setCustomValidity(radio.current.checked ? '' : errorMessage);
|
||||
}
|
||||
function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
alert('All fields are valid!');
|
||||
}
|
||||
useEffect(() => {
|
||||
radio.current.setCustomValidity(errorMessage);
|
||||
}, []);
|
||||
return (
|
||||
<form class="custom-validity" onSubmit={handleSubmit}>
|
||||
<SlRadioGroup label="Select an option">
|
||||
<SlRadio name="a" value="1" checked onSlChange={handleChange}>
|
||||
Not me
|
||||
</SlRadio>
|
||||
<SlRadio name="a" value="2" onSlChange={handleChange}>
|
||||
Me neither
|
||||
</SlRadio>
|
||||
<SlRadio ref={radio} name="a" value="3" onSlChange={handleChange}>
|
||||
Choose me
|
||||
</SlRadio>
|
||||
</SlRadioGroup>
|
||||
<br />
|
||||
<SlButton type="submit" variant="primary">
|
||||
Submit
|
||||
</SlButton>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
[component-metadata:sl-radio]
|
||||
|
|
|
|||
|
|
@ -10,6 +10,19 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
|
|||
|
||||
## Next
|
||||
|
||||
This release breaks radio buttons, which is something that needed to happen to solve a longstanding accessibility issue where screen readers announced an incorrect number of radios, e.g. "1 of 1" instead of "1 of 3." Many attempts to solve this without breaking the existing API were made, but none worked across the board. The new implementation upgrades `<sl-radio-group>` to serve as the "form control" while `<sl-radio>` and `<sl-radio-button>` serve as options within the form control.
|
||||
|
||||
To upgrade to this version, you will need to rework your radio controls by moving `name` up to the radio group. And instead of setting `checked` to select a specific radio, you can set `value` on the radio group and the checked item will update automatically.
|
||||
|
||||
- 🚨 BREAKING: improved accessibility of `<sl-radio-group>` and `<sl-radio>` so they announce properly in all screen readers
|
||||
- Added the `name` attribute to `<sl-radio-group>` and removed it from `<sl-radio>` and `<sl-radio-button>`
|
||||
- Added the `value` attribute to `<sl-radio-group>` (use this to control which radio is checked)
|
||||
- Added the `sl-change` event to `sl-radio-group`
|
||||
- Added `setCustomValidity()` and `reportValidity()` to `<sl-radio-group>`
|
||||
- Removed the `checked` attribute from `<sl-radio>` and `<sl-radio-button>` (use the radio group's `value` attribute instead)
|
||||
- Removed the `sl-change` event from `<sl-radio>` and `<sl-radio-button>` (listen for it on the radio group instead)
|
||||
- Removed the `invalid` attribute from `<sl-radio>` and `<sl-radio-button>`
|
||||
- Removed `setCustomValidity()` and `reportValidity()` from `<sl-radio>` and `<sl-radio-button>` (now available on the radio group)
|
||||
- Revert disabled focus behavior in `<sl-tag-group>`, `<sl-menu>`, and `<sl-tree>` to be consistent with native form controls and menus [#845](https://github.com/shoelace-style/shoelace/issues/845)
|
||||
|
||||
## 2.0.0-beta.79
|
||||
|
|
|
|||
|
|
@ -13,15 +13,13 @@ import type { CSSResultGroup } from 'lit';
|
|||
* @since 2.0
|
||||
* @status stable
|
||||
*
|
||||
* @slot - The radio's label.
|
||||
*
|
||||
* @event sl-blur - Emitted when the button loses focus.
|
||||
* @event sl-focus - Emitted when the button gains focus.
|
||||
*
|
||||
* @slot - The button's label.
|
||||
* @slot prefix - Used to prepend an icon or similar element to the button.
|
||||
* @slot suffix - Used to append an icon or similar element to the button.
|
||||
*
|
||||
* @event sl-blur - Emitted when the button loses focus.
|
||||
* @event sl-focus - Emitted when the button gains focus.
|
||||
*
|
||||
* @csspart base - The component's internal wrapper.
|
||||
* @csspart button - The internal button element.
|
||||
* @csspart prefix - The prefix slot's container.
|
||||
|
|
@ -40,9 +38,6 @@ export default class SlRadioButton extends LitElement {
|
|||
@state() protected hasFocus = false;
|
||||
@state() checked = false;
|
||||
|
||||
/** The radio's name attribute. */
|
||||
@property({ reflect: true }) name: string;
|
||||
|
||||
/** The radio's value attribute. */
|
||||
@property() value: string;
|
||||
|
||||
|
|
@ -109,7 +104,6 @@ export default class SlRadioButton extends LitElement {
|
|||
})}
|
||||
aria-disabled=${this.disabled}
|
||||
type="button"
|
||||
name=${ifDefined(this.name)}
|
||||
value=${ifDefined(this.value)}
|
||||
tabindex="${this.checked ? '0' : '-1'}"
|
||||
@blur=${this.handleBlur}
|
||||
|
|
|
|||
|
|
@ -40,7 +40,6 @@ export default class SlRadioGroup extends LitElement {
|
|||
@query('.radio-group__validation-input') input: HTMLInputElement;
|
||||
|
||||
@state() private hasButtonGroup = false;
|
||||
@state() private isInvalid = false;
|
||||
@state() private errorMessage = '';
|
||||
@state() private customErrorMessage = '';
|
||||
@state() private defaultValue = '';
|
||||
|
|
@ -57,6 +56,12 @@ export default class SlRadioGroup extends LitElement {
|
|||
/** The name assigned to the radio controls. */
|
||||
@property() name = 'option';
|
||||
|
||||
/**
|
||||
* This will be true when the control is in an invalid state. Validity is determined by props such as `type`,
|
||||
* `required`, `minlength`, `maxlength`, and `pattern` using the browser's constraint validation API.
|
||||
*/
|
||||
@property({ type: Boolean, reflect: true }) invalid = false;
|
||||
|
||||
/** Shows the fieldset and legend that surrounds the radio group. */
|
||||
@property({ type: Boolean, attribute: 'fieldset', reflect: true }) fieldset = false;
|
||||
|
||||
|
|
@ -76,16 +81,16 @@ export default class SlRadioGroup extends LitElement {
|
|||
this.defaultValue = this.value;
|
||||
}
|
||||
|
||||
/** Sets a custom validation message. If `message` is not empty, the field will be considered invalid. */
|
||||
setCustomValidity(message = '') {
|
||||
this.customErrorMessage = message;
|
||||
this.errorMessage = message;
|
||||
|
||||
if (!message) {
|
||||
this.isInvalid = false;
|
||||
this.invalid = false;
|
||||
} else {
|
||||
this.isInvalid = true;
|
||||
this.invalid = true;
|
||||
this.input.setCustomValidity(message);
|
||||
this.showNativeErrorMessage();
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -108,17 +113,18 @@ export default class SlRadioGroup extends LitElement {
|
|||
};
|
||||
}
|
||||
|
||||
/** Checks for validity and shows the browser's validation message if the control is invalid. */
|
||||
reportValidity(): boolean {
|
||||
const validity = this.validity;
|
||||
|
||||
this.errorMessage = this.customErrorMessage || validity.valid ? '' : this.input.validationMessage;
|
||||
this.isInvalid = !validity.valid;
|
||||
this.invalid = !validity.valid;
|
||||
|
||||
if (!validity.valid) {
|
||||
this.showNativeErrorMessage();
|
||||
}
|
||||
|
||||
return !this.isInvalid;
|
||||
return !this.invalid;
|
||||
}
|
||||
|
||||
private showNativeErrorMessage() {
|
||||
|
|
@ -185,10 +191,7 @@ export default class SlRadioGroup extends LitElement {
|
|||
private handleSlotChange() {
|
||||
const radios = this.getAllRadios();
|
||||
|
||||
radios.forEach(radio => {
|
||||
radio.name = this.name;
|
||||
radio.checked = radio.value === this.value;
|
||||
});
|
||||
radios.forEach(radio => (radio.checked = radio.value === this.value));
|
||||
|
||||
this.hasButtonGroup = radios.some(radio => radio.tagName.toLowerCase() === 'sl-radio-button');
|
||||
|
||||
|
|
@ -230,7 +233,7 @@ export default class SlRadioGroup extends LitElement {
|
|||
part="base"
|
||||
role="radiogroup"
|
||||
aria-errormessage="radio-error-message"
|
||||
aria-invalid="${this.isInvalid}"
|
||||
aria-invalid="${this.invalid}"
|
||||
class=${classMap({
|
||||
'radio-group': true,
|
||||
'radio-group--has-fieldset': this.fieldset,
|
||||
|
|
|
|||
|
|
@ -27,9 +27,6 @@ export default class SlRadio extends LitElement {
|
|||
@state() checked = false;
|
||||
@state() protected hasFocus = false;
|
||||
|
||||
/** The radio's name attribute. */
|
||||
@property({ reflect: true }) name: string;
|
||||
|
||||
/** The radio's value attribute. */
|
||||
@property() value: string;
|
||||
|
||||
|
|
|
|||
|
|
@ -65,7 +65,7 @@ describe('<sl-tab>', () => {
|
|||
});
|
||||
|
||||
describe('blur', () => {
|
||||
it('shoud blur inner div', async () => {
|
||||
it('should blur inner div', async () => {
|
||||
const el = await fixture<SlTab>(html` <sl-tab>Test</sl-tab> `);
|
||||
|
||||
el.focus();
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue