> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# RadioField (Radio)

> Dokumentasi komponen radio RadioField di YiDA. Pelajari cara mengonfigurasi opsi, nilai default, dan tata letak agar pengguna dapat memilih satu opsi secara eksklusif dari sekumpulan pilihan yang berdampingan.

## Kapan digunakan

* Tombol radio memungkinkan pengguna memilih satu opsi dari sekumpulan data. Gunakan komponen ini ketika pengguna perlu melihat semua opsi yang tersedia secara berdampingan dan membuat pilihan yang eksklusif.
* Jika jumlah opsi terlalu banyak, pertimbangkan menggunakan Daftar Dropdown yang lebih hemat ruang dibandingkan menampilkan setiap opsi secara langsung.

## Contoh Komponen

## Properti Komponen

| Atribut             | Deskripsi                                                                                                                                   | Tipe                                                                | Default                                                                                                          |
| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
| `behavior`          | Status tampilan komponen formulir                                                                                                           | [Behavior](/id/open/yida/components/interface#behavior)             | `'NORMAL'`                                                                                                       |
| `customRender`      | Fungsi render kustom                                                                                                                        | `(item: DataSource) => ReactNode`                                   | -                                                                                                                |
| `dataSource`        | Opsi yang tersedia                                                                                                                          | [DataSource\[\]](/id/open/yida/components/interface#datasource)     | `[ { "text": "Opsi 1", "value": "1" }, { "text": "Opsi 2", "value": "2" }, { "text": "Opsi 3", "value": "3" } ]` |
| `iconPosition`      | Posisi ikon pada perangkat seluler (hanya berlaku di seluler)                                                                               | `'left' \| 'right'`                                                 | `'left'`                                                                                                         |
| `itemDirection`     | Arah tata letak opsi pada PC                                                                                                                | `'hoz' \| 'ver'`                                                    | `'hoz'`                                                                                                          |
| `label`             | Judul komponen formulir                                                                                                                     | `string`                                                            | -                                                                                                                |
| `labelAlign`        | Posisi judul komponen formulir                                                                                                              | `'left' \| 'top'`                                                   | `'top'`                                                                                                          |
| `labelColOffset`    | Offset judul, dalam satuan kisi di mana 1 mewakili 1/24                                                                                     | `number`                                                            | `0`                                                                                                              |
| `labelColSpan`      | Lebar yang ditempati judul, dalam satuan kisi di mana 1 mewakili 1/24                                                                       | `number`                                                            | `4`                                                                                                              |
| `labelTextAlign`    | Perataan judul komponen formulir                                                                                                            | `'left' \| 'right'`                                                 | `'right'`                                                                                                        |
| `labelTipsIcon`     | Ikon entri untuk tooltip judul. Berlaku ketika labelTipsTypes diatur ke **text** atau **render**                                            | `string`                                                            | -                                                                                                                |
| `labelTipsRender`   | Metode render kustom untuk tooltip judul. Berlaku ketika labelTipsTypes diatur ke **render**                                                | `(props: IComponentProps) => ReactNode`                             | -                                                                                                                |
| `labelTipsText`     | Teks tooltip untuk judul. Berlaku ketika labelTipsTypes diatur ke **text**                                                                  | `string`                                                            | -                                                                                                                |
| `labelTipsTypes`    | Tipe tooltip untuk judul komponen formulir                                                                                                  | [LabelTipsTypes](/id/open/yida/components/interface#labeltipstypes) | `'none'`                                                                                                         |
| `onChange`          | Peristiwa yang dipicu saat nilai komponen berubah                                                                                           | `(value: string) => void`                                           | -                                                                                                                |
| `shape`             | Bentuk tampilan                                                                                                                             | `'default' \| 'button'`                                             | `'default'`                                                                                                      |
| `size`              | Ukuran komponen formulir                                                                                                                    | [Size](/id/open/yida/components/interface#size)                     | `'medium'`                                                                                                       |
| `supportInverse`    | Mengizinkan pembatalan pilihan dengan mengeklik ulang opsi yang telah dipilih                                                               | `boolean`                                                           | `false`                                                                                                          |
| `tips`              | Teks deskripsi untuk komponen formulir, ditampilkan di bawah kontrol                                                                        | `string`                                                            | -                                                                                                                |
| `useDrawerInMobile` | Tata letak pada seluler. Jika `true`, opsi ditampilkan inline; jika `false`, opsi dibuka dalam drawer di bagian bawah                       | `boolean`                                                           | `false`                                                                                                          |
| `validation`        | Pengaturan validasi untuk komponen formulir. Untuk detailnya, lihat [dokumentasi validasi formulir](/id/open/yida/guide/concept/validation) | [Validation\[\]](/id/open/yida/components/interface#validation)     | `[]`                                                                                                             |
| `value`             | Nilai default                                                                                                                               | `string`                                                            | `'Opsi 1'`                                                                                                       |
| `wrapperColOffset`  | Offset komponen formulir, dalam satuan kisi di mana 1 mewakili 1/24                                                                         | `number`                                                            | `0`                                                                                                              |
| `wrapperColSpan`    | Lebar yang ditempati komponen formulir, dalam satuan kisi di mana 1 mewakili 1/24                                                           | `number`                                                            | `0`                                                                                                              |