radio-accordion

Radio Accordion

Radio options where the picked one reveals its details, for checkout choices like a card form under the card option or a delivery window under express shipping.

States: Default, Focus, Disabled

Parts

Part	File	Does
RadioAccordion	RadioAccordion.vue	Groups options of which the user picks one; the picked option reveals its details.
RadioAccordionItem	RadioAccordionItem.vue	Groups one option with the details it reveals while selected.
RadioAccordionTrigger	RadioAccordionTrigger.vue	Labels its option and lets the user pick it.
RadioAccordionContent	RadioAccordionContent.vue	Holds the details its option reveals while selected, such as a card form or a delivery window.

Anatomy

<RadioAccordion>
  <RadioAccordionItem>
    <RadioAccordionTrigger />
    <RadioAccordionContent />
  </RadioAccordionItem>
</RadioAccordion>

Styling

Part	Recipe
RadioAccordion	radio-accordion
RadioAccordionItem	radio-accordion-item
RadioAccordionTrigger	radio-accordion-trigger
RadioAccordionTrigger	radio-accordion-indicator
RadioAccordionContent	radio-accordion-content

Install

Writes 7 files into components/ui/radio-accordion/. For agents, npx @frontic/ui docs radio-accordion prints this reference as markdown; the MCP server serves the same.

Installs with it: collapsible; use-field-control
npm packages: @lucide/vue; @vueuse/core; class-variance-authority; reka-ui

Built from

Collapsible

API reference

RadioAccordion RadioAccordion.vue

Groups options of which the user picks one; the picked option reveals its details.

Prop	Type	Default
modelValue	AcceptableValue	—

defaultValue	AcceptableValue	—

disabled	boolean	false

orientation	DataOrientation	—

dir	Direction	—

loop	boolean	true

asChild	boolean	false

as	AsTag \| Component	—
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default —
name	string	—

required	boolean	false

class	ClassValue	—

variant	RadioAccordionVariant	'plain'

Event	Payload
update:modelValue	payload: AcceptableValue

Slot	Slot props
default	{ modelValue: AcceptableValue \| undefined; }

Data attribute	Values
data-disabled	—

data-variant	'outline' \| 'plain'

Recipe radio-accordion	Sets
base: radio-accordion	3 properties

variant: outline	1 property

RadioAccordionItem RadioAccordionItem.vue

RadioAccordionTrigger RadioAccordionTrigger.vue

RadioAccordionContent RadioAccordionContent.vue

Example