單選群組

單選群組允許使用者從一組互斥的選項中選擇單一選項。

安裝

上面的命令僅用於單獨安裝。如果 @nextui-org/react 已全域安裝，則可以跳過此步驟。

導入

用法

已停用

預設值

帶有描述

水平

受控的

您可以使用 value 和 onValueChange 屬性來控制單選輸入值。

注意：NextUI Radio 也支援原生事件，例如 onChange，這對於表單函式庫（例如 Formik 和 React Hook Form）很有用。

無效的

插槽

• RadioGroup 插槽

  • base：單選按鈕群組根包裝器，它包裝標籤和包裝器。
  • wrapper：單選按鈕群組包裝器，它包裝所有單選按鈕。
  • label：單選按鈕群組標籤，它放置在包裝器之前。
  • description：單選按鈕群組的描述插槽。
  • errorMessage：單選按鈕群組的錯誤訊息插槽。

• Radio 插槽

  • base：單選按鈕根包裝器，它包裝所有元素。
  • wrapper：單選按鈕包裝器，它包裝控制元素。
  • hiddenInput：用於處理單選按鈕狀態的隱藏輸入元素。
  • labelWrapper：標籤和描述包裝器。
  • label：單選按鈕的標籤插槽。
  • control：控制元素，它是圓圈元素。
  • description：單選按鈕的描述插槽。

自訂樣式

您可以透過將自訂 Tailwind CSS 類別傳遞到元件插槽來自訂 RadioGroup 和 Radio 元件。

自訂實作

如果您需要進一步自訂單選按鈕群組，可以使用 useRadio hook 來建立您自己的實作。

資料屬性

• RadioGroup 在 base 元素上具有下列屬性

  • data-orientation：單選按鈕群組的方向。基於 orientation 屬性。

• Radio 在 base 元素上具有下列屬性

  • data-selected：當單選按鈕被選中時。基於 isSelected 屬性。
  • data-pressed：當單選按鈕被按下時。基於 usePress。
  • data-invalid：當單選按鈕無效時。基於 validationState 屬性。
  • data-readonly：當單選按鈕為唯讀時。基於 isReadOnly 屬性。
  • data-hover-unselected：當單選按鈕被懸停且未選中時。基於 useHover。
  • data-hover：當單選按鈕被懸停時。基於 useHover。
  • data-focus：當單選按鈕被聚焦時。基於 useFocusRing。
  • data-focus-visible：當使用鍵盤聚焦單選按鈕時。基於 useFocusRing。
  • data-disabled：當單選按鈕被禁用時。基於 isDisabled 屬性。

無障礙功能

• 單選按鈕群組透過 ARIA 暴露給輔助技術。
• 每個單選按鈕都使用原生的 HTML <input> 元素建立，該元素可以選擇性地視覺隱藏以允許自定義樣式。
• 完整支援瀏覽器功能，例如表單自動填寫。
• 支援鍵盤事件的箭頭鍵。
• 鍵盤焦點管理和跨瀏覽器標準化。
• 支援輔助技術的群組和單選按鈕標籤。

API

RadioGroup 屬性

RadioGroup 事件

Radio 屬性