2.6 KiB

Czysty Wina Historia

Radio

[component-header:sl-radio]

Radios are designed to be used with radio groups.

<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>

import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <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>
);

?> This component works with standard <form> elements. Please refer to the section on form controls to learn more about form submission and client-side validation.

Examples

Initial Value

To set the initial value and checked state, use the value attribute on the containing radio group.

<sl-radio-group label="Select an option" name="a" value="3">
  <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>

import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlRadioGroup label="Select an option" name="a" value="3">
    <SlRadio value="1">Option 1</SlRadio>
    <SlRadio value="2">Option 2</SlRadio>
    <SlRadio value="3">Option 3</SlRadio>
  </SlRadioGroup>
);

Disabled

Use the disabled attribute to disable a radio.

<sl-radio-group label="Select an option" name="a" value="1">
  <sl-radio value="1">Option 1</sl-radio>
  <sl-radio value="2" disabled>Option 2</sl-radio>
  <sl-radio value="3">Option 3</sl-radio>
</sl-radio-group>

import { SlRadio, SlRadioGroup } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <SlRadioGroup label="Select an option" name="a" value="1">
    <SlRadio value="1">Option 1</SlRadio>
    <SlRadio value="2" disabled>
      Option 2
    </SlRadio>
    <SlRadio value="3">Option 3</SlRadio>
  </SlRadioGroup>
);

Sizes

Use the size attribute to change a radio's size.

<sl-radio size="small">Small</sl-radio>
<sl-radio size="medium">Medium</sl-radio>
<sl-radio size="large">Large</sl-radio>

import { SlRadio } from '@shoelace-style/shoelace/dist/react';

const App = () => (
  <>
    <SlRadio size="small">Small</SlRadio>
    <br />
    <SlRadio size="medium">Medium</SlRadio>
    <br />
    <SlRadio size="large">Large</SlRadio>
  </>
);

[component-metadata:sl-radio]

2.6 KiB Czysty Wina Historia