diff --git a/docs/components/radio.md b/docs/components/radio.md index 397832f0f9..50250822a4 100644 --- a/docs/components/radio.md +++ b/docs/components/radio.md @@ -51,6 +51,21 @@ Will place label text to the right of the radio. Can also be [slotted](#slots). ``` +### labelAttributes + + KRadio has an instance of KLabel for supporting tooltip text. Use the `labelAttributes` prop to configure the KLabel's [props](/components/label). This example shows using the `labelAttributes` to set up a tooltip. Tooltip content can also be [slotted](#slots). + + + +```html + +``` + ### description Will place description text under the radio label. Can also be [slotted](#slots). @@ -82,6 +97,22 @@ Use this prop to apply error styling to the component. /> ``` +### HTML attributes + +Any valid attribute will be added to the input. You can read more about `$attrs` [here](https://vuejs.org/api/composition-api-setup.html#setup-context). + +Disabled radio + +```html + + Disabled radio + +``` + ### card :::danger NOTE @@ -144,37 +175,6 @@ const cardRadio = ref('') ``` -### labelAttributes - - KRadio has an instance of KLabel for supporting tooltip text. Use the `labelAttributes` prop to configure the KLabel's [props](/components/label). This example shows using the `labelAttributes` to set up a tooltip. Tooltip content can also be [slotted](#slots). - - - -```html - -``` - -### HTML attributes - -Any valid attribute will be added to the input. You can read more about `$attrs` [here](https://vuejs.org/api/composition-api-setup.html#setup-context). - -Disabled radio - -```html - - Disabled radio - -``` - ## Slots ### default @@ -195,11 +195,11 @@ Content passed in to the `default` slot will be shown as the label content. The ``` :::warning NOTE -Avoid slotting in block-level elements like `div` into a `default` slot as it will be rendered inside the `label` element. This applies to card-style radio as well. +To preserve a valid HTML structure, avoid slotting in block-level elements such as a `div` into the `default` slot as it will be rendered inside a `label` element. This also applies to card-style radio. ::: :::tip TIP -When `card` prop is true, the content passed through default slot will render directly above the label. Should you want to customize the layout inside the card you can omit using `label` and `description` props and style content passed through the `default` slot yourself. +When `card` prop is true, the content passed to the `default` slot will render directly above the label. Should you want to customize the layout inside the card you can omit using the `label` and `description` props and style content passed through the `default` slot yourself. ::: ### description