Radio

A set of checkable buttons where only one can be checked at a time.

Show Code

<script setup lang="ts">
import { ref } from 'vue'
import { Radio } from '@destyler-ui/vue'

const items = ref([
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
  { label: 'Svelte', value: 'svelte', disabled: true },
])
</script>

<template>
  <Radio.Root>
    <Radio.Label>Framework</Radio.Label>
    <Radio.Indicator />
    <Radio.Item v-for="item in items" :key="item.value" :value="item.value" :disabled="item.disabled">
      <Radio.ItemText>{{ item.label }}</Radio.ItemText>
      <Radio.ItemControl />
      <Radio.ItemHiddenInput />
    </Radio.Item>
  </Radio.Root>
</template>

import { Radio } from '@destyler-ui/react'

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
  { label: 'Svelte', value: 'svelte', disabled: true },
]

export function Basic() {
  return (
    <Radio.Root>
      <Radio.Label>Framework</Radio.Label>
      <Radio.Indicator />
      {items.map(item => (
        <Radio.Item key={item.value} value={item.value} disabled={item.disabled}>
          <Radio.ItemText>{item.label}</Radio.ItemText>
          <Radio.ItemControl />
          <Radio.ItemHiddenInput />
        </Radio.Item>
      ))}
    </Radio.Root>
  )
}

import { Radio } from '@destyler-ui/solid/radio'
import { Index } from 'solid-js'

export function Basic() {
  const frameworks = ['React', 'Solid', 'Vue']

  return (
    <Radio.Root>
      <Radio.Label>Framework</Radio.Label>
      <Radio.Indicator />
      <Index each={frameworks}>
        {framework => (
          <Radio.Item value={framework()}>
            <Radio.ItemText>{framework()}</Radio.ItemText>
            <Radio.ItemControl />
            <Radio.ItemHiddenInput />
          </Radio.Item>
        )}
      </Index>
    </Radio.Root>
  )
}

<script module lang="ts">
  import type { RadioRootProps } from '@destyler-ui/svelte'

  export interface BasicProps extends RadioRootProps {}
</script>

<script lang="ts">
  import { Radio } from '@destyler-ui/svelte'

  const props: BasicProps = $props()
  const items = [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ]
</script>

<Radio.Root {...props}>
  <Radio.Label>Framework</Radio.Label>
  <Radio.Indicator />
  {#each items as item (item.value)}
    <Radio.Item value={item.value} disabled={item.disabled}>
      <Radio.ItemText>{item.label}</Radio.ItemText>
      <Radio.ItemControl />
      <Radio.ItemHiddenInput />
    </Radio.Item>
  {/each}
</Radio.Root>

Anatomy

<script setup lang="ts">
import { Radio } from '@destyler-ui/vue'
</script>

<template>
  <Radio.Root>
    <Radio.Label />
    <Radio.Indicator />
    <Radio.Item>
      <Radio.ItemControl />
      <Radio.ItemText />
      <Radio.ItemHiddenInput />
    </Radio.Item>
  </Radio.Root>
</template>

import { Radio } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Radio.Root>
      <Radio.Label />
      <Radio.Indicator />
      <Radio.Item>
        <Radio.ItemControl />
        <Radio.ItemText />
        <Radio.ItemHiddenInput />
      </Radio.Item>
    </Radio.Root>
  )
}

import { Radio } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <Radio.Root>
      <Radio.Label />
      <Radio.Indicator />
      <Radio.Item value="solid">
        <Radio.ItemControl />
        <Radio.ItemText />
        <Radio.ItemHiddenInput />
      </Radio.Item>
    </Radio.Root>
  )
}

<script lang="ts">
  import { Radio } from '@destyler-ui/svelte'

  const items = [
    { label: 'React', value: 'react' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte' },
  ]
</script>

<Radio.Root>
  <Radio.Label>Framework</Radio.Label>
  <Radio.Indicator />
  {#each items as item (item.value)}
    <Radio.Item value={item.value}>
      <Radio.ItemText>{item.label}</Radio.ItemText>
      <Radio.ItemControl />
      <Radio.ItemHiddenInput />
    </Radio.Item>
  {/each}
</Radio.Root>

Examples

Basic

Show Code

<script setup lang="ts">
import { ref } from 'vue'
import { Radio } from '@destyler-ui/vue'

const items = ref([
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
  { label: 'Svelte', value: 'svelte', disabled: true },
])
</script>

<template>
  <Radio.Root>
    <Radio.Label>Framework</Radio.Label>
    <Radio.Indicator />
    <Radio.Item v-for="item in items" :key="item.value" :value="item.value" :disabled="item.disabled">
      <Radio.ItemText>{{ item.label }}</Radio.ItemText>
      <Radio.ItemControl />
      <Radio.ItemHiddenInput />
    </Radio.Item>
  </Radio.Root>
</template>

import { Radio } from '@destyler-ui/react'

const items = [
  { label: 'React', value: 'react' },
  { label: 'Solid', value: 'solid' },
  { label: 'Vue', value: 'vue' },
  { label: 'Svelte', value: 'svelte', disabled: true },
]

export function Basic() {
  return (
    <Radio.Root>
      <Radio.Label>Framework</Radio.Label>
      <Radio.Indicator />
      {items.map(item => (
        <Radio.Item key={item.value} value={item.value} disabled={item.disabled}>
          <Radio.ItemText>{item.label}</Radio.ItemText>
          <Radio.ItemControl />
          <Radio.ItemHiddenInput />
        </Radio.Item>
      ))}
    </Radio.Root>
  )
}

import { Radio } from '@destyler-ui/solid/radio'
import { Index } from 'solid-js'

export function Basic() {
  const frameworks = ['React', 'Solid', 'Vue']

  return (
    <Radio.Root>
      <Radio.Label>Framework</Radio.Label>
      <Radio.Indicator />
      <Index each={frameworks}>
        {framework => (
          <Radio.Item value={framework()}>
            <Radio.ItemText>{framework()}</Radio.ItemText>
            <Radio.ItemControl />
            <Radio.ItemHiddenInput />
          </Radio.Item>
        )}
      </Index>
    </Radio.Root>
  )
}

<script module lang="ts">
  import type { RadioRootProps } from '@destyler-ui/svelte'

  export interface BasicProps extends RadioRootProps {}
</script>

<script lang="ts">
  import { Radio } from '@destyler-ui/svelte'

  const props: BasicProps = $props()
  const items = [
    { label: 'React', value: 'react' },
    { label: 'Solid', value: 'solid' },
    { label: 'Vue', value: 'vue' },
    { label: 'Svelte', value: 'svelte', disabled: true },
  ]
</script>

<Radio.Root {...props}>
  <Radio.Label>Framework</Radio.Label>
  <Radio.Indicator />
  {#each items as item (item.value)}
    <Radio.Item value={item.value} disabled={item.disabled}>
      <Radio.ItemText>{item.label}</Radio.ItemText>
      <Radio.ItemControl />
      <Radio.ItemHiddenInput />
    </Radio.Item>
  {/each}
</Radio.Root>

Initial Value

Set the initial selected value.

Show Code

<script setup lang="ts">
import { Radio } from '@destyler-ui/vue'
import { ref } from 'vue'

const frameworks = ref(['React', 'Solid', 'Vue'])
</script>

<template>
  <Radio.Root model-value="Solid">
    <Radio.Label>Framework</Radio.Label>
    <Radio.Indicator />
    <Radio.Item v-for="framework in frameworks" :key="framework" :value="framework">
      <Radio.ItemText>{{ framework }}</Radio.ItemText>
      <Radio.ItemControl />
      <Radio.ItemHiddenInput />
    </Radio.Item>
  </Radio.Root>
</template>

import { Radio } from '@destyler-ui/react'

const frameworks = ['React', 'Solid', 'Vue']

export function InitialValue() {
  return (
    <Radio.Root defaultValue="Solid">
      <Radio.Label>Framework</Radio.Label>
      <Radio.Indicator />
      {frameworks.map(framework => (
        <Radio.Item key={framework} value={framework}>
          <Radio.ItemText>{framework}</Radio.ItemText>
          <Radio.ItemControl />
          <Radio.ItemHiddenInput />
        </Radio.Item>
      ))}
    </Radio.Root>
  )
}

import { Radio } from '@destyler-ui/solid/radio'
import { Index } from 'solid-js'

export function InitialValue() {
  const frameworks = ['React', 'Solid', 'Vue']

  return (
    <Radio.Root value="Solid">
      <Radio.Label>Framework</Radio.Label>
      <Index each={frameworks}>
        {framework => (
          <Radio.Item value={framework()}>
            <Radio.ItemText>{framework()}</Radio.ItemText>
            <Radio.ItemControl />
            <Radio.ItemHiddenInput />
          </Radio.Item>
        )}
      </Index>
    </Radio.Root>
  )
}

<script lang="ts">
  import { Radio } from '@destyler-ui/svelte'

  const frameworks = ['React', 'Solid', 'Vue']
</script>

<Radio.Root defaultValue="Solid">
  <Radio.Label>Framework</Radio.Label>
  <Radio.Indicator />
  {#each frameworks as framework (framework)}
    <Radio.Item value={framework}>
      <Radio.ItemText>{framework}</Radio.ItemText>
      <Radio.ItemControl />
      <Radio.ItemHiddenInput />
    </Radio.Item>
  {/each}
</Radio.Root>

Disabled

Disable the radio group or individual items.

Show Code

<script setup lang="ts">
import { Radio } from '@destyler-ui/vue'
import { ref } from 'vue'

const frameworks = ref(['React', 'Solid', 'Vue'])
</script>

<template>
  <Radio.Root disabled>
    <Radio.Label>Framework</Radio.Label>
    <Radio.Indicator />
    <Radio.Item v-for="framework in frameworks" :key="framework" :value="framework">
      <Radio.ItemText>{{ framework }}</Radio.ItemText>
      <Radio.ItemControl />
      <Radio.ItemHiddenInput />
    </Radio.Item>
  </Radio.Root>
</template>

import { Radio } from '@destyler-ui/react'

const frameworks = ['React', 'Solid', 'Vue']

export function Disabled() {
  return (
    <Radio.Root disabled>
      <Radio.Label>Framework</Radio.Label>
      <Radio.Indicator />
      {frameworks.map(framework => (
        <Radio.Item key={framework} value={framework}>
          <Radio.ItemText>{framework}</Radio.ItemText>
          <Radio.ItemControl />
          <Radio.ItemHiddenInput />
        </Radio.Item>
      ))}
    </Radio.Root>
  )
}

import { Radio } from '@destyler-ui/solid/radio'
import { Index } from 'solid-js'

export function Disabled() {
  const frameworks = ['React', 'Solid', 'Vue']

  return (
    <Radio.Root disabled>
      <Radio.Label>Framework</Radio.Label>
      <Index each={frameworks}>
        {framework => (
          <Radio.Item value={framework()}>
            <Radio.ItemText>{framework()}</Radio.ItemText>
            <Radio.ItemControl />
            <Radio.ItemHiddenInput />
          </Radio.Item>
        )}
      </Index>
    </Radio.Root>
  )
}

<script lang="ts">
  import { Radio } from '@destyler-ui/svelte'

  const frameworks = ['React', 'Solid', 'Vue']
</script>

<Radio.Root disabled>
  <Radio.Label>Framework</Radio.Label>
  <Radio.Indicator />
  {#each frameworks as framework (framework)}
    <Radio.Item value={framework}>
      <Radio.ItemText>{framework}</Radio.ItemText>
      <Radio.ItemControl />
      <Radio.ItemHiddenInput />
    </Radio.Item>
  {/each}
</Radio.Root>

On Event

Listen for value change events.

Show Code

<script setup lang="ts">
import { Radio } from '@destyler-ui/vue'
import { ref } from 'vue'

const frameworks = ref(['React', 'Solid', 'Vue'])
</script>

<template>
  <Radio.Root @value-change="(details) => console.log(details.value)">
    <Radio.Label>Framework</Radio.Label>
    <Radio.Indicator />
    <Radio.Item v-for="framework in frameworks" :key="framework" :value="framework">
      <Radio.ItemText>{{ framework }}</Radio.ItemText>
      <Radio.ItemControl />
      <Radio.ItemHiddenInput />
    </Radio.Item>
  </Radio.Root>
</template>

import type { UseRadioProps } from '@destyler-ui/react'
import { Radio } from '@destyler-ui/react'

const frameworks = ['React', 'Solid', 'Vue']

export function OnEvent(props: { onValueChange?: UseRadioProps['onValueChange'] }) {
  const { onValueChange } = props
  return (
    <Radio.Root onValueChange={onValueChange}>
      <Radio.Label>Framework</Radio.Label>
      <Radio.Indicator />
      {frameworks.map(framework => (
        <Radio.Item key={framework} value={framework}>
          <Radio.ItemText>{framework}</Radio.ItemText>
          <Radio.ItemControl />
          <Radio.ItemHiddenInput />
        </Radio.Item>
      ))}
    </Radio.Root>
  )
}

import { Radio } from '@destyler-ui/solid/radio'
import { Index } from 'solid-js'

export function OnEvent() {
  const frameworks = ['React', 'Solid', 'Vue']

  return (
    <Radio.Root onValueChange={details => console.warn(details.value)}>
      <Radio.Label>Framework</Radio.Label>
      <Index each={frameworks}>
        {framework => (
          <Radio.Item value={framework()}>
            <Radio.ItemText>{framework()}</Radio.ItemText>
            <Radio.ItemControl />
            <Radio.ItemHiddenInput />
          </Radio.Item>
        )}
      </Index>
    </Radio.Root>
  )
}

<script module lang="ts">
  import type { UseRadioProps } from '@destyler-ui/svelte'

  export interface OnEventProps {
    onValueChange?: UseRadioProps['onValueChange']
  }
</script>

<script lang="ts">
  import { Radio } from '@destyler-ui/svelte'

  const props: OnEventProps = $props()
  const frameworks = ['React', 'Solid', 'Vue']
</script>

<Radio.Root onValueChange={props.onValueChange}>
  <Radio.Label>Framework</Radio.Label>
  <Radio.Indicator />
  {#each frameworks as framework (framework)}
    <Radio.Item value={framework}>
      <Radio.ItemText>{framework}</Radio.ItemText>
      <Radio.ItemControl />
      <Radio.ItemHiddenInput />
    </Radio.Item>
  {/each}
</Radio.Root>

Root Provider

Show Code

<script setup lang="ts">
import { Radio, useRadio } from '@destyler-ui/vue'
import { ref } from 'vue'

const frameworks = ref(['React', 'Solid', 'Vue'])

const radio = useRadio()
</script>

<template>
  <button @click="radio.focus()">Focus</button>

  <Radio.RootProvider :value="radio">
    <Radio.Label>Framework</Radio.Label>
    <Radio.Indicator />
    <Radio.Item v-for="framework in frameworks" :key="framework" :value="framework">
      <Radio.ItemText>{{ framework }}</Radio.ItemText>
      <Radio.ItemControl />
      <Radio.ItemHiddenInput />
    </Radio.Item>
  </Radio.RootProvider>
</template>

import { Radio, useRadio } from '@destyler-ui/react'

const frameworks = ['React', 'Solid', 'Vue']

export function RootProvider() {
  const radio = useRadio()

  return (
    <>
      <button onClick={() => radio.focus()}>Focus</button>

      <Radio.RootProvider value={radio}>
        <Radio.Label>Framework</Radio.Label>
        <Radio.Indicator />
        {frameworks.map(framework => (
          <Radio.Item key={framework} value={framework}>
            <Radio.ItemText>{framework}</Radio.ItemText>
            <Radio.ItemControl />
            <Radio.ItemHiddenInput />
          </Radio.Item>
        ))}
      </Radio.RootProvider>
    </>
  )
}

import { Radio, useRadio } from '@destyler-ui/solid/radio'
import { Index } from 'solid-js'

export function RootProvider() {
  const frameworks = ['React', 'Solid', 'Vue']

  const radio = useRadio()

  return (
    <>
      <button onClick={() => radio().focus()}>Focus</button>

      <Radio.RootProvider value={radio}>
        <Radio.Label>Framework</Radio.Label>
        <Radio.Indicator />
        <Index each={frameworks}>
          {framework => (
            <Radio.Item value={framework()}>
              <Radio.ItemText>{framework()}</Radio.ItemText>
              <Radio.ItemControl />
              <Radio.ItemHiddenInput />
            </Radio.Item>
          )}
        </Index>
      </Radio.RootProvider>
    </>
  )
}

<script lang="ts">
  import { Radio, useRadio } from '@destyler-ui/svelte'

  const id = $props.id()
  const radio = useRadio({ id })
  const frameworks = ['React', 'Solid', 'Vue']
</script>

<button type="button" onclick={() => radio().focus()}>Focus</button>

<Radio.RootProvider value={radio}>
  <Radio.Label>Framework</Radio.Label>
  <Radio.Indicator />
  {#each frameworks as framework (framework)}
    <Radio.Item value={framework}>
      <Radio.ItemText>{framework}</Radio.ItemText>
      <Radio.ItemControl />
      <Radio.ItemHiddenInput />
    </Radio.Item>
  {/each}
</Radio.RootProvider>

API Reference

Root

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
defaultValue	—	string The initial value of the radio when it is first rendered. Use when you do not need to control the state of the radio.
disabled	—	false | true If `true`, the radio will be disabled
form	—	string The associate form of the underlying input.
id	—	string The unique identifier of the machine.
ids	—	Partial<{ root: string; label: string; indicator: string; item: (value: string) => string; itemLabel: (value: string) => string; itemControl: (value: string) => string; itemHiddenInput: (value: string) => string; }> The ids of the elements in the radio. Useful for composition.
modelValue	—	string
name	—	string The name of the input fields in the radio (Useful for form submission).
orientation	—	"horizontal" | "vertical" Orientation of the radio
readOnly	—	false | true Whether the checkbox is read-only

Emit	Event
update:modelValue	[value: string] The callback fired when the model value changes.
valueChange	[details: ValueChangeDetails] Function called once a radio is checked

Context

No serializable props or emits are declared for this part.

Indicator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
value*	—	string
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
disabled	—	false | true
invalid	—	false | true

ItemContext

No serializable props or emits are declared for this part.

ItemControl

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemHiddenInput

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemText

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
value*	—	MachineApi<PropTypes>
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
defaultValue	—	null | string The initial value of the radio group when it is first rendered. Use when you do not need to control the state of the radio group.
disabled	—	false | true If `true`, the radio group will be disabled
form	—	string The associate form of the underlying input.
id	—	string The unique identifier of the machine.
ids	—	Partial<{ root: string; label: string; indicator: string; item: (value: string) => string; itemLabel: (value: string) => string; itemControl: (value: string) => string; itemHiddenInput: (value: string) => string; }> The ids of the elements in the radio. Useful for composition.
name	—	string The name of the input fields in the radio (Useful for form submission).
onValueChange	—	(details: radio.ValueChangeDetails) => void Function called once a radio is checked
orientation	—	"horizontal" | "vertical" Orientation of the radio group
readOnly	—	false | true Whether the checkbox is read-only
value	—	null | string The value of the checked radio

Context

No serializable props or emits are declared for this part.

Indicator

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
value*	—	string
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.
disabled	—	false | true
invalid	—	false | true

ItemContext

No serializable props or emits are declared for this part.

ItemControl

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemHiddenInput

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

ItemText

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
value*	—	UseRadioReturn
asChild	—	false | true Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js154.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.
defaultValue	—	null | string The initial value of the radio group when it is first rendered. Use when you do not need to control the state of the radio group.
disabled	—	false | true If `true`, the radio group will be disabled
form	—	string The associate form of the underlying input.
ids	—	Partial<{ root: string; label: string; indicator: string; item: (value: string) => string; itemLabel: (value: string) => string; itemControl: (value: string) => string; itemHiddenInput: (value: string) => string; }> The ids of the elements in the radio. Useful for composition.
name	—	string The name of the input fields in the radio (Useful for form submission).
onValueChange	—	(details: ValueChangeDetails) => void Function called once a radio is checked
orientation	—	"horizontal" | "vertical" Orientation of the radio group
readOnly	—	false | true Whether the checkbox is read-only
value	—	null | string The value of the checked radio

Context

Prop	Default	Type
children*	—	(context: UseRadioContext) => Element

Indicator

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js154.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
value*	—	string
asChild	—	(props: (userProps?: solid_js154.JSX.LabelHTMLAttributes<HTMLLabelElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.
disabled	—	false | true
invalid	—	false | true

ItemContext

Prop	Default	Type
children*	—	(context: UseRadioItemContext) => Element

ItemControl

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js154.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

ItemHiddenInput

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js154.JSX.InputHTMLAttributes<HTMLInputElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

ItemText

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js154.JSX.HTMLAttributes<HTMLSpanElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Label

Prop	Default	Type
asChild	—	(props: (userProps?: solid_js154.JSX.LabelHTMLAttributes<HTMLLabelElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
value*	—	UseRadioReturn
asChild	—	(props: (userProps?: solid_js154.JSX.HTMLAttributes<HTMLDivElement> | undefined) => JSX.HTMLAttributes<any>) => JSX.Element Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined
defaultValue	—	null | string
disabled	—	false | true If `true`, the radio group will be disabled
form	—	string The associate form of the underlying input.
id	—	string
ids	—	Partial<{ root: string; label: string; indicator: string; item: (value: string) => string; itemLabel: (value: string) => string; itemControl: (value: string) => string; itemHiddenInput: (value: string) => string; }> The ids of the elements in the radio. Useful for composition.
name	—	string The name of the input fields in the radio (Useful for form submission).
onValueChange	—	(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").RadioValueChangeDetails) => void Function called once a radio is checked
orientation	—	"horizontal" | "vertical" Orientation of the radio group
readOnly	—	false | true Whether the checkbox is read-only
value	—	null | string The value of the checked radio

Context

Prop	Default	Type
children*	—	Snippet<[UseRadioContext]>

Indicator

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

Item

Prop	Default	Type
value*	—	string
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"label">]>
children	—	Snippet<[]> | undefined
disabled	—	false | true
invalid	—	false | true

ItemContext

Prop	Default	Type
render*	—	Snippet<[UseRadioItemContext]>

ItemControl

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined

ItemHiddenInput

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"input">]>
children	—	Snippet<[]> | undefined

ItemText

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"span">]>
children	—	Snippet<[]> | undefined

Label

Prop	Default	Type
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"label">]>
children	—	Snippet<[]> | undefined

RootProvider

Prop	Default	Type
value*	—	UseRadioReturn
asChild	—	import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>
children	—	Snippet<[]> | undefined