Bileşenler

RadioGroup

Birbirini dışlayan seçenekleri bir başlık altında toplayan ve tek seçime izin veren grup.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

RadioGroup bir <fieldset> çizer; label başlık olur. Her öğe bir Radio’dur ve değeri value ile verilir.

Grup etiketi

Bir seçenek seçin.

Birinci seçenek

İkinci seçenek

Üçüncü seçenek

import { Radio, RadioGroup } from '@bigbang/ui';

export default function Default() {
  return (
    <RadioGroup label="Grup etiketi" description="Bir seçenek seçin." defaultValue="one">
      <Radio value="one" label="Birinci seçenek" />
      <Radio value="two" label="İkinci seçenek" />
      <Radio value="three" label="Üçüncü seçenek" />
    </RadioGroup>
  );
}

Açıklamalı öğeler

Radio’nun description metni etiketin altında durur ve öğeye aria-describedby ile bağlanır.

Grup etiketi

Birinci seçenekSeçenek açıklaması burada yer alır.

İkinci seçenekSeçenek açıklaması burada yer alır.

import { Radio, RadioGroup } from '@bigbang/ui';

export default function WithDescriptions() {
  return (
    <RadioGroup label="Grup etiketi" defaultValue="one">
      <Radio value="one" label="Birinci seçenek" description="Seçenek açıklaması burada yer alır." />
      <Radio value="two" label="İkinci seçenek" description="Seçenek açıklaması burada yer alır." />
    </RadioGroup>
  );
}

Kontrollü ve yatay

value ve onValueChange ile seçimi siz tutarsınız. orientation="horizontal" kısa seçenekleri bir satıra dizer.

Grup etiketi

Birinci seçenek

İkinci seçenek

Üçüncü seçenek

one

import { Radio, RadioGroup } from '@bigbang/ui';
import { useState } from 'react';

export default function Controlled() {
  const [value, setValue] = useState('one');
  return (
    <div className="flex flex-col gap-md">
      <RadioGroup label="Grup etiketi" value={value} onValueChange={setValue} orientation="horizontal">
        <Radio value="one" label="Birinci seçenek" />
        <Radio value="two" label="İkinci seçenek" />
        <Radio value="three" label="Üçüncü seçenek" />
      </RadioGroup>
      <code className="type-body-sm text-fg-subtle">{value}</code>
    </div>
  );
}

Durumlar

Radio’daki disabled yalnızca o öğeyi, RadioGroup’taki disabled tüm grubu kapatır.

Grup etiketi

Birinci seçenek

İkinci seçenek

Grup etiketi

Birinci seçenek

İkinci seçenek

import { Radio, RadioGroup } from '@bigbang/ui';

export default function States() {
  return (
    <div className="flex flex-col gap-xl">
      <RadioGroup label="Grup etiketi" defaultValue="one">
        <Radio value="one" label="Birinci seçenek" />
        <Radio value="two" label="İkinci seçenek" disabled />
      </RadioGroup>
      <RadioGroup label="Grup etiketi" defaultValue="one" disabled>
        <Radio value="one" label="Birinci seçenek" />
        <Radio value="two" label="İkinci seçenek" />
      </RadioGroup>
    </div>
  );
}

Geçersiz

error verildiğinde grup aria-invalid alır ve tüm daireler tehlike kenarlığı gösterir.

Grup etiketi

Birinci seçenek

İkinci seçenek

Devam etmek için bir seçenek seçin.

import { Radio, RadioGroup } from '@bigbang/ui';

export default function Invalid() {
  return (
    <>
      <RadioGroup label="Grup etiketi" required error="Devam etmek için bir seçenek seçin.">
        <Radio value="one" label="Birinci seçenek" />
        <Radio value="two" label="İkinci seçenek" />
      </RadioGroup>
    </>
  );
}

Açık ve koyu mod

Seçili daire color-action-primary-default dolgu alır.

Grup etiketi

Birinci seçenek

İkinci seçenek

Devam etmek için bir seçenek seçin.

Grup etiketi

Birinci seçenek

İkinci seçenek

Devam etmek için bir seçenek seçin.

import { Radio, RadioGroup } from '@bigbang/ui';

export default function Invalid() {
  return (
    <>
      <RadioGroup label="Grup etiketi" required error="Devam etmek için bir seçenek seçin.">
        <Radio value="one" label="Birinci seçenek" />
        <Radio value="two" label="İkinci seçenek" />
      </RadioGroup>
    </>
  );
}