单选按钮

单选按钮组允许用户在多个选项中选择一个值。

用法
样式设置

状态
排列方向
自定义选项展示
基本特性
样式变体

单选按钮组允许用户在多个选项中选择一个值。

Source code

RadioButtonBasic.javapackage com.vaadin.demo.component.radiobutton;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.component.radiobutton.RadioGroupVariant;
import com.vaadin.flow.router.Route;

@Route("radio-button-basic")
public class RadioButtonBasic extends Div {

    public RadioButtonBasic() {
        // tag::snippet[]
        RadioButtonGroup<String> radioGroup = new RadioButtonGroup<>();
        radioGroup.addThemeVariants(RadioGroupVariant.LUMO_VERTICAL);
        radioGroup.setLabel("Travel class");
        radioGroup.setItems("Economy", "Business", "First Class");
        add(radioGroup);
        // end::snippet[]
    }

}
radio-button-basic.tsximport React from 'react';
import { RadioButton } from '@vaadin/react-components/RadioButton.js';
import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';

function Example() {
  return (
    // tag::snippet[]
    <RadioGroup label="Travel class" theme="vertical">
      <RadioButton value="economy" label="Economy" />
      <RadioButton value="business" label="Business" />
      <RadioButton value="firstClass" label="First Class" />
    </RadioGroup>
    // end::snippet[]
  );
}

radio-button-basic.tsimport '@vaadin/radio-group';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('radio-button-basic')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-radio-group label="Travel class" theme="vertical">
        <vaadin-radio-button value="economy" label="Economy"></vaadin-radio-button>
        <vaadin-radio-button value="business" label="Business"></vaadin-radio-button>
        <vaadin-radio-button value="firstClass" label="First Class"></vaadin-radio-button>
      </vaadin-radio-group>
      <!-- end::snippet[] -->
    `;
  }
}

状态

只读

当内容需要可访问但不允许编辑时，请使用只读属性。只读元素不可编辑，但仍然是标签顺序的一部分，因此可以获得焦点。只读输入栏中的内容可选中并复制。

Open in a
new tab

Source code

RadioButtonReadonly.javapackage com.vaadin.demo.component.radiobutton;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.router.Route;

@Route("radio-button-readonly")
public class RadioButtonReadonly extends Div {

    public RadioButtonReadonly() {
        // tag::snippet[]
        RadioButtonGroup<String> radioGroup = new RadioButtonGroup<>();
        radioGroup.setLabel("Status");
        radioGroup.setItems("In progress", "Done", "Cancelled");
        radioGroup.setValue("In progress");
        radioGroup.setReadOnly(true);
        add(radioGroup);
        // end::snippet[]
    }

}
radio-button-readonly.tsximport React from 'react';
import { RadioButton } from '@vaadin/react-components/RadioButton.js';
import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';

function Example() {
  return (
    // tag::snippet[]
    <RadioGroup label="Status" readonly>
      <RadioButton value="inProgress" label="In progress" checked />
      <RadioButton value="done" label="Done" />
      <RadioButton value="cancelled" label="Cancelled" />
    </RadioGroup>
    // end::snippet[]
  );
}

radio-button-readonly.tsimport '@vaadin/radio-group';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('radio-button-readonly')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-radio-group label="Status" readonly>
        <vaadin-radio-button value="inProgress" label="In progress" checked></vaadin-radio-button>
        <vaadin-radio-button value="done" label="Done"></vaadin-radio-button>
        <vaadin-radio-button value="cancelled" label="Cancelled"></vaadin-radio-button>
      </vaadin-radio-group>
      <!-- end::snippet[] -->
    `;
  }
}

禁用

禁用字段以将其标记为当前不可用。禁用状态用于不可编辑且无需查看的字段。禁用元素无法获得焦点，可能对屏幕阅读器等辅助技术不可用。

与隐藏元素相比，禁用元素在改变元素可见性时不会引起布局变化，并且能让用户了解其存在即使当前不可用，因此可能更合适。

Open in a
new tab

Source code

RadioButtonDisabled.javapackage com.vaadin.demo.component.radiobutton;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.router.Route;

@Route("radio-button-disabled")
public class RadioButtonDisabled extends Div {

    public RadioButtonDisabled() {
        // tag::snippet[]
        RadioButtonGroup<String> radioGroup = new RadioButtonGroup<>();
        radioGroup.setLabel("Status");
        radioGroup.setItems("In progress", "Done", "Cancelled");
        radioGroup.setValue("In progress");
        radioGroup.setEnabled(false);
        add(radioGroup);
        // end::snippet[]
    }

}
radio-button-disabled.tsximport React from 'react';
import { RadioButton } from '@vaadin/react-components/RadioButton.js';
import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';

function Example() {
  return (
    // tag::snippet[]
    <RadioGroup label="Status" disabled>
      <RadioButton value="inProgress" label="In progress" checked />
      <RadioButton value="done" label="Done" />
      <RadioButton value="cancelled" label="Cancelled" />
    </RadioGroup>
    // end::snippet[]
  );
}

radio-button-disabled.tsimport '@vaadin/radio-group';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('radio-button-disabled')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-radio-group label="Status" disabled>
        <vaadin-radio-button value="inProgress" label="In progress" checked></vaadin-radio-button>
        <vaadin-radio-button value="done" label="Done"></vaadin-radio-button>
        <vaadin-radio-button value="cancelled" label="Cancelled"></vaadin-radio-button>
      </vaadin-radio-group>
      <!-- end::snippet[] -->
    `;
  }
}

排列方向

组件的默认排列是水平的。然而，建议尽可能使用垂直排列，因为用户通常更容易扫描垂直排列的选项列表：

Open in a
new tab

Source code

RadioButtonVertical.javapackage com.vaadin.demo.component.radiobutton;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.component.radiobutton.RadioGroupVariant;
import com.vaadin.flow.router.Route;

@Route("radio-button-vertical")
public class RadioButtonVertical extends Div {

    public RadioButtonVertical() {
        // tag::snippet[]
        RadioButtonGroup<String> radioGroup = new RadioButtonGroup<>();
        radioGroup.addThemeVariants(RadioGroupVariant.LUMO_VERTICAL);
        radioGroup.setLabel("Status");
        radioGroup.setItems("Pending", "Submitted", "Confirmed");
        radioGroup.setValue("Pending");
        add(radioGroup);
        // end::snippet[]
    }

}
radio-button-vertical.tsximport React from 'react';
import { RadioButton } from '@vaadin/react-components/RadioButton.js';
import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';

function Example() {
  return (
    // tag::snippet[]
    <RadioGroup label="Status" theme="vertical">
      <RadioButton value="pending" label="Pending" checked />
      <RadioButton value="submitted" label="Submitted" />
      <RadioButton value="confirmed" label="Confirmed" />
    </RadioGroup>
    // end::snippet[]
  );
}

radio-button-vertical.tsimport '@vaadin/radio-group';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('radio-button-vertical')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-radio-group label="Status" theme="vertical">
        <vaadin-radio-button value="pending" label="Pending" checked></vaadin-radio-button>
        <vaadin-radio-button value="submitted" label="Submitted"></vaadin-radio-button>
        <vaadin-radio-button value="confirmed" label="Confirmed"></vaadin-radio-button>
      </vaadin-radio-group>
      <!-- end::snippet[] -->
    `;
  }
}

在需要节省垂直空间的情况下，可以使用水平排列方向。但建议选项不超过三个：

Open in a
new tab

Source code

RadioButtonHorizontal.javapackage com.vaadin.demo.component.radiobutton;

import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.router.Route;

@Route("radio-button-horizontal")
public class RadioButtonHorizontal extends Div {

    public RadioButtonHorizontal() {
        // tag::snippet[]
        RadioButtonGroup<String> radioGroup = new RadioButtonGroup<>();
        radioGroup.setLabel("Status");
        radioGroup.setItems("Pending", "Submitted", "Confirmed");
        radioGroup.setValue("Pending");
        add(radioGroup);
        // end::snippet[]
    }

}
radio-button-horizontal.tsximport React from 'react';
import { RadioButton } from '@vaadin/react-components/RadioButton.js';
import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';

function Example() {
  return (
    // tag::snippet[]
    <RadioGroup label="Status" theme="horizontal">
      <RadioButton value="pending" label="Pending" checked />
      <RadioButton value="submitted" label="Submitted" />
      <RadioButton value="confirmed" label="Confirmed" />
    </RadioGroup>
    // end::snippet[]
  );
}

radio-button-horizontal.tsimport '@vaadin/radio-group';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('radio-button-horizontal')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-radio-group label="Status" theme="horizontal">
        <vaadin-radio-button value="pending" label="Pending" checked></vaadin-radio-button>
        <vaadin-radio-button value="submitted" label="Submitted"></vaadin-radio-button>
        <vaadin-radio-button value="confirmed" label="Confirmed"></vaadin-radio-button>
      </vaadin-radio-group>
      <!-- end::snippet[] -->
    `;
  }
}

需要更多选项时，可使用Select组件。

自定义选项展示

单选项可以定制显示多于一行的文本：

Open in a
new tab

Source code

RadioButtonPresentation.javapackage com.vaadin.demo.component.radiobutton;

import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.html.Image;
import com.vaadin.flow.component.html.Span;
import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.component.radiobutton.RadioGroupVariant;
import com.vaadin.flow.data.renderer.ComponentRenderer;
import com.vaadin.flow.router.Route;
import java.util.List;

import com.vaadin.demo.domain.Card;
import com.vaadin.demo.domain.DataService;

@Route("radio-button-custom-item-presentation")
public class RadioButtonPresentation extends Div {

    public RadioButtonPresentation() {
        // tag::snippet[]
        RadioButtonGroup<Card> radioGroup = new RadioButtonGroup<>();
        radioGroup.addThemeVariants(RadioGroupVariant.LUMO_VERTICAL);
        radioGroup.setLabel("Payment method");

        List<Card> cards = DataService.getCards();
        radioGroup.setItems(cards);
        radioGroup.setValue(cards.get(0));
        radioGroup.setRenderer(new ComponentRenderer<>(card -> {
            Image logo = new Image(card.getPictureUrl(), card.getName());
            logo.setHeight("1em");
            Span number = new Span(new Text(card.getAccountNumber()));
            Text expiryDate = new Text("Expiry date:" + card.getExpiryDate());

            return new Div(new HorizontalLayout(logo, number),
                    new Div(expiryDate));
        }));

        add(radioGroup);
        // end::snippet[]
    }

}
Card.javapackage com.vaadin.demo.domain;


// tag::snippet[]
public class Card {

    private String name;

    private String accountNumber;

    private String pictureUrl;

    private String expiryDate;

    private String cvv;

    private Integer id;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getAccountNumber() {
        return accountNumber;
    }

    public void setAccountNumber(String accountNumber) {
        this.accountNumber = accountNumber;
    }

    public String getPictureUrl() {
        return pictureUrl;
    }

    public void setPictureUrl(String pictureUrl) {
        this.pictureUrl = pictureUrl;
    }

    public String getExpiryDate() {
        return expiryDate;
    }

    public void setExpiryDate(String expiryDate) {
        this.expiryDate = expiryDate;
    }

    public String getCvv() {
        return cvv;
    }

    public void setCvv(String cvv) {
        this.cvv = cvv;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    @Override
    public int hashCode() {
        return id;
    }

    @Override
    public boolean equals(Object obj) {
        if (this == obj) {
            return true;
        }
        if (!(obj instanceof Card)) {
            return false;
        }
        Card other = (Card) obj;
        return id == other.id;
    }
}
// end::snippet[]
Card.java
DataService.javapackage com.vaadin.demo.domain;

import java.io.InputStream;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

import com.fasterxml.jackson.databind.ObjectMapper;

import org.springframework.core.io.ClassPathResource;

public class DataService {

    public static <T> T getItems(Class<T> clazz, String dataFileName) {
        ObjectMapper mapper = new ObjectMapper();
        try {
            InputStream stream = new ClassPathResource("data/" + dataFileName)
                    .getInputStream();
            return mapper.readValue(stream, clazz);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }

    public static List<Person> getPeople() {
        List<Person> people = Arrays
                .asList(getItems(Person[].class, "people.json"));
        List<String> peopleImages = Arrays
                .asList(getItems(String[].class, "peopleImages.json"));
        for (int index = 0; index < people.size(); index++) {
            String pictureUrl = peopleImages.get(index % peopleImages.size());
            people.get(index).setPictureUrl(pictureUrl);
        }
        return people;
    }

    public static List<Person> getPeople(int count) {
        return getPeople().subList(0, count);
    }

    public static List<Person> getPeople(int count, Integer managerId) {
        List<Person> people = getPeople(managerId);
        return people.subList(0, count);
    }

    public static List<String> getProfessions() {
        List<Person> people = Arrays
                .asList(getItems(Person[].class, "people.json"));
        ArrayList<String> professions = new ArrayList<>();
        for (Person person : people) {
            String profession = person.getProfession();
            if (!professions.contains(profession)) {
                professions.add(profession);
            }
        }
        return professions;
    }

    /**
     * Get employees for a given manager.
     */
    public static List<Person> getPeople(Integer managerId) {
        List<Person> people = new ArrayList<>(getPeople());
        people.removeIf(person -> person.getManagerId() == null
                || !person.getManagerId().equals(managerId));
        return people;
    }

    /**
     * Get all managers.
     */
    public static List<Person> getManagers() {
        List<Person> people = new ArrayList<>(getPeople());
        people.removeIf(person -> !person.isManager());
        return people;
    }

    public static Templates getTemplates() {
        return getItems(Templates.class, "templates.json");
    }

    public static List<Card> getCards() {
        return Arrays.asList(getItems(Card[].class, "cards.json"));
    }

    public static List<Country> getCountries() {
        return Arrays.asList(getItems(Country[].class, "countries.json"));
    }

    public static List<UserPermissions> getUserPermissions() {
        return Arrays
                .asList(getItems(UserPermissions[].class, "permissions.json"));
    }

    public static List<Report> getReports() {
        return Arrays.asList(getItems(Report[].class, "reports.json"));
    }
}
DataService.java
radio-button-presentation.tsximport React, { useEffect } from 'react';
import { useSignal } from '@vaadin/hilla-react-signals';
import { HorizontalLayout } from '@vaadin/react-components/HorizontalLayout.js';
import { RadioButton } from '@vaadin/react-components/RadioButton.js';
import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
import { getCards } from 'Frontend/demo/domain/DataService';
import type Card from 'Frontend/generated/com/vaadin/demo/domain/Card';

function Example() {
  const value = useSignal<string>('');
  const items = useSignal<Card[]>([]);

  useEffect(() => {
    getCards().then((cards) => {
      items.value = cards;
      value.value = String(cards[0].id);
    });
  }, []);

  return (
    // tag::snippet[]
    <RadioGroup
      label="Payment method"
      theme="vertical"
      value={value.value}
      onValueChanged={(event) => {
        value.value = event.detail.value;
      }}
    >
      {items.value.map((card) => (
        <RadioButton value={String(card.id)} key={card.id}>
          <label slot="label">
            <HorizontalLayout theme="spacing">
              <img src={card.pictureUrl} alt={card.name} style={{ height: '1em' }} />
              <span>{card.accountNumber}</span>
            </HorizontalLayout>
            <div>Expiry date:{card.expiryDate}</div>
          </label>
        </RadioButton>
      ))}
    </RadioGroup>
    // end::snippet[]
  );
}

radio-button-presentation.tsimport '@vaadin/horizontal-layout';
import '@vaadin/radio-group';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { getCards } from 'Frontend/demo/domain/DataService';
import type Card from 'Frontend/generated/com/vaadin/demo/domain/Card';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('radio-button-presentation')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  @state()
  private value: string | undefined;

  @state()
  private items: Card[] = [];

  protected override async firstUpdated() {
    this.items = await getCards();
    this.value = String(this.items[0].id);
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-radio-group label="Payment method" theme="vertical" .value="${this.value}">
        ${this.items.map(
          (card) => html`
            <vaadin-radio-button .value="${String(card.id)}">
              <label slot="label">
                <vaadin-horizontal-layout theme="spacing">
                  <img src="${card.pictureUrl}" alt="${card.name}" style="height: 1em;" />
                  <span>${card.accountNumber}</span>
                </vaadin-horizontal-layout>
                <div>Expiry date:${card.expiryDate}</div>
              </label>
            </vaadin-radio-button>
          `
        )}
      </vaadin-radio-group>
      <!-- end::snippet[] -->
    `;
  }
}

基本特性

以下是大多数输入字段组件都支持的基本特性：

标签

标签用于标识输入字段。其内容为纯文本，并且长度受限于字段的宽度。可使用辅助信息和工具提示来提供无法在标签中展示的附加信息。

强烈建议所有输入字段均使用可视化标签。当无法使用内置标签时，可以通过 aria-labelledby 属性将外部元素关联为字段标签。对于没有任何可见标签的字段，应通过 aria-label 属性为辅助技术提供不可见标签。

辅助信息

辅助信息用于在字段下方为用户提供可能需要输入的信息，例如格式要求或字段用途说明。

可以使用样式变体将辅助信息显示在字段上方。

除了纯文本之外，辅助信息还可以包含组件和HTML元素。但若内容较为复杂或具有交互性，可能会存在可访问性问题。

外部及不可见标签（ARIA）

强烈建议所有输入字段使用可视化标签。当无法使用内置标签时，可以通过元素的 id 属性将外部元素关联为字段标签。没有任何可见标签的字段，建议为辅助技术（如屏幕阅读器）提供不可见标签。

Source code

HTML<!-- 将外部元素关联为标签： -->
<label id="external-label">This is the label</label>
<vaadin-radio-button-group accessible-name-ref="external-label">...

<!-- 为屏幕阅读器提供不可见的标签： -->
<vaadin-radio-button-group accessible-name="This is the label">...
Java// 将外部元素关联为标签：
NativeLabel label = new NativeLabel("This is the label");
label.setId("external-label");
field.setAriaLabelledBy("external-label");

// 为屏幕阅读器提供不可见的标签：
field.setAriaLabel("This is the label");

Open in a
new tab

Source code

RadioButtonGroupBasicFeatures.javapackage com.vaadin.demo.component.radiobutton;

import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.router.Route;

@Route("radio-button-group-basic-features")
public class RadioButtonGroupBasicFeatures extends HorizontalLayout {

    public RadioButtonGroupBasicFeatures() {
        setPadding(false);

        // tag::snippet[]
        RadioButtonGroup<String> field = new RadioButtonGroup<>();
        field.setLabel("Label");
        field.setHelperText("Helper text");
        field.setTooltipText("Tooltip text");
        // end::snippet[]
        field.setItems("Item 1", "Item 2", "Item 3");

        add(field);
    }

}
radio-button-group-basic-features.tsximport React from 'react';
import { RadioButton } from '@vaadin/react-components/RadioButton.js';
import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';
import { Tooltip } from '@vaadin/react-components/Tooltip.js';

function Example() {
  return (
    // tag::snippet[]
    <RadioGroup label="Label" helperText="Helper text">
      <Tooltip slot="tooltip" text="Tooltip text" />

      <RadioButton value="1" label="Item 1" />
      <RadioButton value="2" label="Item 2" />
      <RadioButton value="3" label="Item 3" />
    </RadioGroup>
    // end::snippet[]
  );
}

radio-button-group-basic-features.tsimport '@vaadin/radio-group';
import '@vaadin/tooltip';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('radio-button-group-basic-features')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-radio-group label="Label" helper-text="Helper text">
        <vaadin-tooltip slot="tooltip" text="Tooltip text"></vaadin-tooltip>
        <!-- tag::snippet[] -->
        <vaadin-radio-button value="1" label="Item 1"></vaadin-radio-button>
        <vaadin-radio-button value="2" label="Item 2"></vaadin-radio-button>
        <vaadin-radio-button value="3" label="Item 3"></vaadin-radio-button>
        <!-- end::snippet[] -->
      </vaadin-radio-group>
      <!-- end::snippet[] -->
    `;
  }
}

样式变体

可应用以下样式变体：

辅助信息显示于字段上方

辅助信息可显示在字段上方、标签下方。

边框

可通过为 --vaadin-input-field-border-width CSS 属性赋值（如 1px），为字段表面添加边框。可通过 html 选择器为所有输入字段全局应用边框，也可以仅应用于特定组件实例。要获得符合 WCAG 2.1 AA 级色彩对比标准的默认 Lumo 字段样式，边框是必需的。

可通过 --vaadin-input-field-border-color 属性重写默认边框颜色。

Open in a
new tab

Source code

RadioButtonGroupStyles.javapackage com.vaadin.demo.component.radiobutton;

import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
import com.vaadin.flow.component.radiobutton.RadioButtonGroup;
import com.vaadin.flow.component.radiobutton.RadioGroupVariant;
import com.vaadin.flow.router.Route;

@Route("radio-button-group-styles")
public class RadioButtonGroupStyles extends HorizontalLayout {

    public RadioButtonGroupStyles() {
        setPadding(false);

        // tag::snippet[]
        RadioButtonGroup<String> field = new RadioButtonGroup<>();
        field.addThemeVariants(RadioGroupVariant.LUMO_HELPER_ABOVE_FIELD);
        field.getStyle().set("--vaadin-input-field-border-width", "1px");
        // end::snippet[]
        field.setLabel("Label");
        field.setHelperText("Helper text");
        field.setItems("Item 1", "Item 2", "Item 3");

        add(field);
    }

}
radio-button-group-styles.tsximport React from 'react';
import { RadioButton } from '@vaadin/react-components/RadioButton.js';
import { RadioGroup } from '@vaadin/react-components/RadioGroup.js';

function Example() {
  return (
    // tag::snippet[]
    <RadioGroup
      label="Label"
      helperText="Helper text"
      style={{ '--vaadin-input-field-border-width': '1px' } as React.CSSProperties}
      theme="helper-above-field"
    >
      <RadioButton value="1" label="Item 1" />
      <RadioButton value="2" label="Item 2" />
      <RadioButton value="3" label="Item 3" />
    </RadioGroup>
    // end::snippet[]
  );
}

radio-button-group-styles.tsimport '@vaadin/radio-group';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { applyTheme } from 'Frontend/generated/theme';

@customElement('radio-button-group-styles')
export class Example extends LitElement {
  protected override createRenderRoot() {
    const root = super.createRenderRoot();
    // Apply custom theme (only supported if your app uses one)
    applyTheme(root);
    return root;
  }

  protected override render() {
    return html`
      <!-- tag::snippet[] -->
      <vaadin-radio-group
        theme="helper-above-field"
        label="Label"
        helper-text="Helper text"
        style="--vaadin-input-field-border-width: 1px;"
      >
        <!-- end::snippet[] -->
        <vaadin-radio-button value="1" label="Item 1"></vaadin-radio-button>
        <vaadin-radio-button value="2" label="Item 2"></vaadin-radio-button>
        <vaadin-radio-button value="3" label="Item 3"></vaadin-radio-button>
        <!-- tag::snippet[] -->
      </vaadin-radio-group>
      <!-- end::snippet[] -->
    `;
  }
}

E1E617CE-F935-451D-885F-CEF94EC0E53A

Docs

Docs

单选按钮

状态

只读

禁用

排列方向

自定义选项展示

基本特性

样式变体