跳到主要内容

单选按钮组
就绪
Storybook

单选按钮组用于从多个互斥选项中选择单个值，采用水平标签式布局。

使用场景​

当有最多四个选项可用时，使用 RadioButtonGroup 进行互斥选择。这是因为 RadioButtonGroup 不能有多于一行，并且需要适应小分辨率。对于超过四个选项的互斥选择，请使用 Select 组件或 RadioButtonList 组件。

单选按钮只能存在于这种类型的组中。如果您想要单个选项，最好改用 Switch。要在同一组或同一上下文中提供多个非互斥选项，请改用 Checkbox。

用法​

基本单选按钮组​

加载中...
实时编辑器
function Basic() {
  const [value, setValue] = useState<string>();
  return (
    <RadioButtonGroup
      options={[
        { label: 'Prometheus', value: 'prometheus' },
        { label: 'Graphite', value: 'graphite', icon: 'cloud' },
        { label: 'Elastic', value: 'elastic' },
      ]}
      value={value}
      onChange={setValue}
    />
  );
}

禁用选项​

可以通过将一些选项传递给 disabledOptions prop 来禁用它们。请记住，disabledOptions 会与选项值通过 === 运算符进行比较。

加载中...
实时编辑器
function WithDisabledOptions() {
  const [value, setValue] = useState('graphite');
  return (
    <RadioButtonGroup
      options={[
        { label: 'Prometheus', value: 'prometheus' },
        { label: 'Graphite', value: 'graphite', icon: 'cloud' },
        { label: 'Elastic', value: 'elastic' },
      ]}
      value={value}
      disabledOptions={['prometheus', 'elastic']}
      onChange={setValue}
    />
  );
}

整个控件可以通过 disabled prop 禁用。

加载中...
实时编辑器
function Disabled() {
  const [value, setValue] = useState('prometheus');
  return (
    <RadioButtonGroup
      disabled
      options={[
        { label: 'Prometheus', value: 'prometheus' },
        { label: 'Graphite', value: 'graphite', icon: 'cloud' },
        { label: 'Elastic', value: 'elastic' },
      ]}
      value={value}
      onChange={setValue}
    />
  );
}

尺寸​

指定尺寸 sm 可获得更小、更紧凑的控件。小型变体通常与其他元素内联使用，例如标题。避免在表单中使用 sm。

加载中...
实时编辑器
function WithSize() {
  const [value, setValue] = useState('prometheus');
  return (
    <RadioButtonGroup
      size="sm"
      options={[
        { label: 'Prometheus', value: 'prometheus' },
        { label: 'Graphite', value: 'graphite', icon: 'cloud' },
        { label: 'Elastic', value: 'elastic' },
      ]}
      value={value}
      onChange={setValue}
    />
  );
}

宽度​

默认情况下，RadioButtonGroup 的宽度将根据其内容调整。指定 fullWidth prop 可使控件横跨容器的整个宽度。

加载中...
实时编辑器
function FullWidth() {
  const [value, setValue] = useState('prometheus');
  return (
    <RadioButtonGroup
      fullWidth
      options={[
        { label: 'Prometheus', value: 'prometheus' },
        { label: 'Graphite', value: 'graphite', icon: 'cloud' },
        { label: 'Elastic', value: 'elastic' },
      ]}
      value={value}
      onChange={setValue}
    />
  );
}