diff --git a/docs/components/radio-button.md b/docs/components/radio-button.md index 03046ef09..388b9aa6f 100644 --- a/docs/components/radio-button.md +++ b/docs/components/radio-button.md @@ -59,8 +59,8 @@ Use the `disabled` attribute to disable a radio button. ```html preview Option 1 - Option 2 - Option 3 + Option 2 + Option 3 ``` @@ -70,10 +70,10 @@ import { SlRadioButton, SlRadioGroup } from '@shoelace-style/shoelace/dist/react const App = () => ( Option 1 - Option 2 - - Option 3 + + Option 2 + Option 3 ); ``` diff --git a/docs/components/radio-group.md b/docs/components/radio-group.md index 9c1bf9a5b..8e1d9864f 100644 --- a/docs/components/radio-group.md +++ b/docs/components/radio-group.md @@ -74,6 +74,32 @@ const App = () => ( ); ``` +### Disabling Options + +Radios and radio buttons can be disabled by adding the `disabled` attribute to the respective options inside the radio group. + +```html preview + + Option 1 + Option 2 + Option 3 + +``` + +```jsx react +import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; + +const App = () => ( + + Option 1 + + Option 2 + + Option 3 + +); +``` + ### 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. diff --git a/docs/components/radio.md b/docs/components/radio.md index ef7497ba1..cd40541cc 100644 --- a/docs/components/radio.md +++ b/docs/components/radio.md @@ -35,7 +35,7 @@ const App = () => ( To set the initial value and checked state, use the `value` attribute on the containing radio group. ```html preview - + Option 1 Option 2 Option 3 @@ -46,7 +46,7 @@ To set the initial value and checked state, use the `value` attribute on the con import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; const App = () => ( - + Option 1 Option 2 Option 3 @@ -61,8 +61,8 @@ Use the `disabled` attribute to disable a radio. ```html preview Option 1 - Option 2 - Option 3 + Option 2 + Option 3 ``` @@ -72,10 +72,10 @@ import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react'; const App = () => ( Option 1 - Option 2 - - Option 3 + + Option 2 + Option 3 ); ```