Radio

Description of the Radio's function.

Examples

Basic

Basic usage of radio.

<Radio>Radio</Radio>

<script>
  import { Radio } from "svant";
</script>

Disabled

Disabled radio.


<Radio bind:checked="{checked1}" {disabled}>Disabled</Radio>
<br />
<Radio bind:checked="{checked2}" {disabled}>Disabled</Radio>
<Button type="primary" on:click="{toggleDisabled}" style="{{ marginTop: 20 }}">
  Toggle disabled
</Button>

<script>
  import { Radio, Button } from "svant";
  let disabled = true;

  let checked1 = false;
  let checked2 = true;

  function toggleDisabled() {
    disabled = !disabled;
  }
</script>

Radio Group

A group of radio components.

<RadioGroup bind:value on:change="{onChange}">
  <Radio value="{1}">A</Radio>
  <Radio value="{2}">B</Radio>
  <Radio value="{3}">C</Radio>
  <Radio value="{4}">D</Radio>
</RadioGroup>

<script>
  import { Radio, RadioGroup } from "svant";
  let value = 1;

  function onChange() {
    console.log("radio checked", value);
  }
</script>

Vertical Radio Group

Vertical radio group.

<RadioGroup on:change="{onChange}" bind:value>
  <Radio value="{1}" style="{radioStyle}">Option A</Radio>
  <Radio value="{2}" style="{radioStyle}">Option B</Radio>
  <Radio value="{3}" style="{radioStyle}">Option C</Radio>
</RadioGroup>

<script>
  import { Radio, RadioGroup } from "svant";
  const radioStyle = {
    display: "block",
    height: "30px",
    lineHeight: "30px"
  };
  let value = 1;
  function onChange() {
    console.log("radio checked", value);
  }
</script>

Radio Group With Options

Render radios by configuring options.



<RadioGroup
  options="{plainOptions}"
  on:change="{onChange1}"
  bind:value="{value1}" />
<br />
<RadioGroup
  options="{optionsWithDisabled}"
  on:change="{onChange2}"
  bind:value="{value2}" />
<br />
<RadioGroup {options} disabled bind:value="{value3}" />

<script>
  import { RadioGroup } from "svant";
  let value1 = "Apple";
  let value2 = "Apple";
  let value3 = "Apple";
  const plainOptions = ["Apple", "Pear", "Orange"];
  const options = [
    { label: "Apple", value: "Apple" },
    { label: "Pear", value: "Pear" },
    { label: "Orange", value: "Orange" }
  ];
  const optionsWithDisabled = [
    { label: "Apple", value: "Apple" },
    { label: "Pear", value: "Pear" },
    { label: "Orange", value: "Orange", disabled: true }
  ];

  function onChange1() {
    console.log("radio1 checked", value1);
  }

  function onChange2() {
    console.log("radio2 checked", value2);
  }
</script>

Radio Button Group

Radio button group example.



<RadioGroup on:change="{onChange1}" bind:value="{value1}">
  <RadioButton value="a">Hangzhou</RadioButton>
  <RadioButton value="b">Shanghai</RadioButton>
  <RadioButton value="c">Beijing</RadioButton>
  <RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
<br />
<RadioGroup
  on:change="{onChange2}"
  bind:value="{value2}"
  style="{{ marginTop: 16 }}">
  <RadioButton value="a">Hangzhou</RadioButton>
  <RadioButton value="b" disabled>Shanghai</RadioButton>
  <RadioButton value="c">Beijing</RadioButton>
  <RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
<br />
<RadioGroup
  disabled
  on:change="{onChange3}"
  bind:value="{value3}"
  style="{{ marginTop: 16 }}">
  <RadioButton value="a">Hangzhou</RadioButton>
  <RadioButton value="b">Shanghai</RadioButton>
  <RadioButton value="c">Beijing</RadioButton>
  <RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>

<script>
  import { RadioButton, RadioGroup } from "svant";
  let value1 = "a";
  let value2 = "a";
  let value3 = "a";

  function onChange1() {
    console.log("first radio group changed", value1);
  }

  function onChange2() {
    console.log("second radio group changed", value2);
  }

  function onChange3() {
    console.log("third radio group changed", value3);
  }
</script>

Solid Button Group

Solid radio button group example.


<RadioGroup on:change="{onChange}" bind:value="{value1}" buttonStyle="solid">
  <RadioButton value="a">Hangzhou</RadioButton>
  <RadioButton value="b">Shanghai</RadioButton>
  <RadioButton value="c">Beijing</RadioButton>
  <RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
<br />

<RadioGroup
  disabled
  on:change="{onChange}"
  bind:value="{value2}"
  buttonStyle="solid"
  style="{{ marginTop: 16 }}">
  <RadioButton value="a">Hangzhou</RadioButton>
  <RadioButton value="b">Shanghai</RadioButton>
  <RadioButton value="c">Beijing</RadioButton>
  <RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>

<script>
  import { RadioButton, RadioGroup } from "svant";

  let value1 = "a";
  let value2 = "a";

  function onChange() {
    console.log("radio checked", value1);
  }
</script>

Size

Different size radio button groups.



<RadioGroup bind:value="{value1}" size="large">
  <RadioButton value="a">Hangzhou</RadioButton>
  <RadioButton value="b">Shanghai</RadioButton>
  <RadioButton value="c">Beijing</RadioButton>
  <RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
<br />

<RadioGroup bind:value="{value2}" style="{{ marginTop: 16 }}">
  <RadioButton value="a">Hangzhou</RadioButton>
  <RadioButton value="b">Shanghai</RadioButton>
  <RadioButton value="c">Beijing</RadioButton>
  <RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>
<br />

<RadioGroup bind:value="{value3}" size="small" style="{{ marginTop: 16 }}">
  <RadioButton value="a">Hangzhou</RadioButton>
  <RadioButton value="b">Shanghai</RadioButton>
  <RadioButton value="c">Beijing</RadioButton>
  <RadioButton value="d">Chengdu</RadioButton>
</RadioGroup>

<script>
  import { RadioButton, RadioGroup } from "svant";
  let value1 = "a";
  let value2 = "a";
  let value3 = "a";
</script>

API

Radio Attributes

PropertyDescriptionTypeDefault
autoFocusSet focus when component mounted.Booleanfalse
checkedSpecifies whether the checkbox is selected.Booleanfalse
disabledDisable checkbox.Booleanfalse
valueValue is used to determine if this radio is selected in a group.Any-

RadioGroup Attributes

PropertyDescriptionTypeDefault
disabledDisable all radios.Booleanfalse
nameThe name property of all input[type="radio"] children.String-
optionsSpecifies options.String[] | [{label:"",value:"",disabled:false}][]
valueUsed for setting the currently selected value. Can be used for 2 way binding.String-
sizeSize for radio buttons.large | middle | small-
buttonStyleStyle type of the radio buttons.outline | solidoutline

Radio Events

NameDescription
changeTriggers when the radio checked state changes.

RadioGroup Events

NameDescription
changeTriggers when the radio group value changes.

Radio Bind

NameDescription
focusLet's you bind to the input focus method.
blurLet's you bind to the input blur method.