Skip to contentPorsche Design System
You are currently viewing an earlier release of the Porsche Design System.Switch to the latest Porsche Design System documentation.
SearchGitHub repository of Porsche Design SystemOpen settings sidebar
Radio Group Table of Contents Radio Group Propertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultcompact compactReduces the spacing between radio options for use in dense layouts where vertical space is limited.booleanfalsedescription descriptionSets a supplementary description displayed below the label to give users additional guidance about the radio group.string''direction 🛠directionSets the layout direction of the radio options. Use column to stack them vertically or row to arrange them horizontally. Supports responsive breakpoint values.type RadioGroupDirection =
'row'
'column'
BreakpointCustomizable<RadioGroupDirection>'column'disabled disabledDisables all radio options in the group, preventing selection and excluding the value from form submissions.booleanfalseform formAssociates the radio group with a form element by its ID when the group is not a direct descendant of that form.stringundefinedhideLabel 🛠hide-labelHides the visible label while keeping it accessible to screen readers. Supports responsive breakpoint values.boolean
BreakpointCustomizable<boolean>falselabel labelSets the visible label text displayed above the radio group to identify the group's purpose.string''loading 🧪loadingexperimental Disables all radio options and shows a spinner to indicate a background loading operation.booleanfalsemessage messageSets the validation feedback message displayed below the radio group when state is success or error.string''name nameSets the shared name attribute for all radio buttons in the group, grouping them for mutually exclusive selection.stringundefinedrequired requiredMarks the radio group as required so the form cannot be submitted until one option is selected.booleanfalsestate stateSets the validation state of the radio group, controlling its visual appearance and feedback message style (none, success, error).type RadioGroupState =
'none'
'error'
'success''none'value valueSets the currently selected value that pre-selects the matching radio option and reflects user changes.string''EventsEventDescriptionTypeblur Emitted when the radio group loses focus after the user interacts with it, useful for triggering validation on blur.CustomEvent<void>change Emitted when the user selects a different option, carrying the new value and the native event in the event detail.type RadioGroupChangeEventDetail = Event
CustomEvent<RadioGroupChangeEventDetail>SlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot name="label"> Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed.<slot name="label-after"> Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`).<slot name="description"> Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed.<slot> Default slot for the p-radio-group-option tags.<slot name="message"> Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed. Radio Group Option PropertiesPropertyAttributeDescriptionTypeDefaultdisabled disabledPrevents this option from being selected and excludes its value from form submissions while it is disabled.booleanfalselabel labelSets the visible label text displayed next to the radio button that the user reads to identify the option.stringundefinedloading 🧪loadingexperimental Disables this option and shows a spinner to indicate that this particular option is in a loading state.booleanfalsevalue valueSets the value submitted with the form data when this radio option is selected within its parent group.stringundefinedSlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot name="label"> Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed.<slot name="label-after"> Places additional content after the label text (for content that should not be part of the label, e.g. external links or `p-popover`).
Global settingsColor SchemeAll color tokens use the light-dark() CSS function. Set the theme via the CSS color-scheme property: light for light mode, dark for dark mode, or light dark to follow the user's system preference.LightDarkLight DarkDirectionThe dir global attribute in HTML changes the direction of text and other content within an element. It's most often used on the <html> tag to set the entire page's direction, which is crucial for supporting languages that are written from right to left (RTL), such as Arabic and Hebrew. For example, using <html dir="rtl"> makes the entire page display from right to left, adjusting the layout and text flow accordingly.LTR (left-to-right)RTL (right-to-left)Text ZoomTo ensure accessibility and comply with WCAG 2.2 AA standards, it is mandatory for web content to support text resizing up to at least 200% without loss of content or functionality. Using relative units like rem is a best practice for achieving this, as they allow the text to scale uniformly based on the user's browser settings.100%130%150%200%