Radio

Implemented Input

Radio group, vertical and horizontal.

Kumo reference: kumo-ui.com/components/radio/

Presentation commands show demo feedback. Read the interaction guide to connect real actions.

Vertical

Notification preference

Email SMS Push notification

Show template

{% load wdj %}
{% include "wdj/components/radio_group.html" with name="radio_vertical" options=audit_radio_notifications legend="Notification preference" selected="email" only %}

Horizontal

Billing interval

Monthly Annual

Show template

{% load wdj %}
{% include "wdj/components/radio_group.html" with name="radio_horizontal" options=horizontal_options legend="Billing interval" orientation="horizontal" selected="monthly" only %}

Descriptions

Plan options

FreeUp to 3 projects. ProUnlimited projects. TeamSSO and audit logs.

Show template

{% load wdj %}
{% include "wdj/components/radio_group.html" with name="radio_descriptions" options=plans legend="Plan options" only %}

Required

Required plan

FreeUp to 3 projects. ProUnlimited projects. TeamSSO and audit logs.

Show template

{% load wdj %}
{% include "wdj/components/radio_group.html" with name="radio_required" options=plans legend="Required plan" required=True only %}

Error

Plan

FreeUp to 3 projects. ProUnlimited projects. TeamSSO and audit logs.

Choose a plan.

Show template

{% load wdj %}
{% include "wdj/components/radio_group.html" with name="radio_error" options=plans legend="Plan" error="Choose a plan." only %}

Disabled option

Available plans

FreeUp to 3 projects. ProUnlimited projects. TeamSSO and audit logs.

Show template

{% load wdj %}
{% include "wdj/components/radio_group.html" with name="radio_disabled_option" options=disabled_plans legend="Available plans" only %}

Segmented

Plan selection

FreeUp to 3 projects. ProUnlimited projects. TeamSSO and audit logs.

Show template

{% load wdj %}
{% include "wdj/components/radio_group.html" with options=plans selected="pro" name="radio_segmented" legend="Plan selection" appearance="segmented" only %}

Disabled group

Plan selection

FreeUp to 3 projects. ProUnlimited projects. TeamSSO and audit logs.

Show template

{% load wdj %}
{% include "wdj/components/radio_group.html" with options=plans selected="pro" name="radio_disabled_group" legend="Plan selection" disabled=True only %}

Disabled segmented

Plan selection

FreeUp to 3 projects. ProUnlimited projects. TeamSSO and audit logs.

Show template

{% load wdj %}
{% include "wdj/components/radio_group.html" with options=plans selected="pro" name="radio_disabled_segmented" legend="Plan selection" disabled=True appearance="segmented" only %}

Hidden legend

FreeUp to 3 projects. ProUnlimited projects. TeamSSO and audit logs.

Show template

{% load wdj %}
{% include "wdj/components/radio_group.html" with options=plans selected="pro" name="radio_hidden_legend" legend="Plan selection" hide_legend=True only %}

Group description

Plan selection

Choose a configuration.

FreeUp to 3 projects. ProUnlimited projects. TeamSSO and audit logs.

Show template

{% load wdj %}
{% include "wdj/components/radio_group.html" with options=plans selected="pro" name="radio_group_description" legend="Plan selection" description="Choose a configuration." only %}

Trailing control

Plan selection

FreeUp to 3 projects. ProUnlimited projects. TeamSSO and audit logs.

Show template

{% load wdj %}
{% include "wdj/components/radio_group.html" with options=plans selected="pro" name="radio_trailing_control" legend="Plan selection" control_position="end" only %}

Cards

Plan selection

FreeUp to 3 projects. ProUnlimited projects. TeamSSO and audit logs.

Show template

{% load wdj %}
{% include "wdj/components/radio_group.html" with options=plans selected="pro" name="radio_cards" legend="Plan selection" appearance="card" only %}

Cards with trailing control

Plan selection

FreeUp to 3 projects. ProUnlimited projects. TeamSSO and audit logs.

Show template

{% load wdj %}
{% include "wdj/components/radio_group.html" with options=plans selected="pro" name="radio_cards_with_trailing_control" legend="Plan selection" appearance="card" control_position="end" only %}

Horizontal cards

Plan selection

FreeUp to 3 projects. ProUnlimited projects. TeamSSO and audit logs.

Show template

{% load wdj %}
{% include "wdj/components/radio_group.html" with options=plans selected="pro" name="radio_horizontal_cards" legend="Plan selection" appearance="card" orientation="horizontal" only %}

Numeric values

Plan selection

10 25 50

Show template

{% load wdj %}
{% include "wdj/components/radio_group.html" with name="radio_numeric_values" legend="Plan selection" options=numeric_plans selected=25 only %}

Rich labels

Plan selection

FreeUp to 3 projects. Pro Recommended Unlimited projects. TeamSSO and audit logs.

Show template

{% load wdj %}
{% include "wdj/components/radio_group.html" with name="radio_rich_labels" legend="Plan selection" options=badged_plans appearance="card" only %}

Horizontal segmented

Plan selection

FreeUp to 3 projects. ProUnlimited projects. TeamSSO and audit logs.

Show template

{% load wdj %}
{% include "wdj/components/radio_group.html" with options=plans selected="pro" name="radio_horizontal_segmented" legend="Plan selection" appearance="segmented" orientation="horizontal" only %}

Controlled state

Selected plan

FreeUp to 3 projects. ProUnlimited projects. TeamSSO and audit logs.

free

Show template

{% load wdj %}
<div x-data="{ value: 'free' }" @change="value=$event.target.value" class="grid gap-3">{% include "wdj/components/radio_group.html" with options=plans selected="free" name="radio_controlled" legend="Selected plan" only %}<output class="text-base text-kumo-subtle" aria-live="polite" x-text="value">free</output></div>

Long labels and narrow layouts

Deployment

Global deployment across multiple regionsA longer description that wraps naturally on a narrow screen. Local development environment

Show template

{% load wdj %}
{% include "wdj/components/radio_group.html" with name="audit-long-radio" legend="Deployment" options=audit_long_radio appearance="segmented" only %}

Custom legend styling

Choose a deployment

Global deployment across multiple regionsA longer description that wraps naturally on a narrow screen. Local development environment

Show template

{% load wdj %}
{% include "wdj/components/radio_group.html" with name="audit-legend-radio" legend="Choose a deployment" legend_class="text-lg" options=audit_long_radio only %}

API Reference

Prop	Type	Default	Description
name	string	unset	Name; pass the documented value shown in the examples.
options	list[dict]	[]	Select: value/label/display_label/disabled/selected or groups with options. Combobox input: value/label/disabled/group/icon/description; button search also supports Select groups.
selected	string / number	unset	Initial server selection: one value, a list for multiple=True, or selected flags on native options.
legend	string	unset	Legend; pass the documented value shown in the examples.
legend_class	string	unset	Legend class; pass the documented value shown in the examples.
description	string	unset	Description; pass the documented value shown in the examples.
error	string	unset	Validation message; implies error styling and accessible error association.
variant	string	component-specific	Variant; pass the documented value shown in the examples.
required	bool	False	Required; pass the documented value shown in the examples.
disabled	bool	False	Disabled; pass the documented value shown in the examples.
orientation	string	unset	Orientation; pass the documented value shown in the examples.
appearance	string	unset	Checkbox: card or default. Radio: default/card/segmented. Badge: filled/dot.
control_position	string	unset	Control position; pass the documented value shown in the examples.
hide_legend	bool	False	Hide legend; pass the documented value shown in the examples.
id	string	unset	Stable unique DOM ID; important for HTMX targets and focus restoration.
attrs	dict	{}	Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract