Skip to content
BlazorUI

Inputs

ChoiceGroup

Bit.BlazorUIRadioRadioButtonRadioGroupRadioButtonGroup

ChoiceGroup, also known as Radio or RadioGroup, lets people select a single value from two or more mutually exclusive choices. Reach for it when all the options are worth showing at once (roughly two to seven of them) and the choice matters enough to stay visible; a Dropdown suits longer lists, and a Checkbox suits choices that are not mutually exclusive. It renders native radio inputs, so the browser provides the full keyboard behavior for free: the whole group is a single tab stop that lands on the checked item, and the arrow keys move the selection with wrapping and RTL awareness. On top of that it adds a group label and helper text, per-item icons, images, prefixes and descriptions, vertical, horizontal and full width layouts, and templates at every level, all through three interchangeable item APIs.

Notes

The BitChoiceGroup is a Multi-API component which can accept the list of Items in 3 different ways:
1. The BitChoiceGroupItem class
2. A Custom Generic class
3. The BitChoiceGroupOption component

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

The basic ChoiceGroup lets people select a single item from a set of mutually exclusive choices. It is fully keyboard accessible: Tab focuses the checked item and the arrow keys move the selection. The NoCircle mode removes the radio circle of each item.

Basic Items
NoCircle

Disabled

Disables the whole ChoiceGroup or its individual items. Disabled items cannot be selected and are skipped by the keyboard navigation.

Disabled ChoiceGroup
ChoiceGroup with Disabled Item

Images and Icons

Displays items as image or icon tiles: ImageSrc with an optional ImageSize renders a picture, IconName (or Icon for an external library) renders a glyph, and SelectedImageSrc swaps in a second picture while the item is checked. The images are marked decorative so the item text carries the accessible name; set ImageAlt only when the picture says something the text does not. The Inline mode drops the tile layout and puts the image or icon on the same line as the text.


Image Items
Icon Items




Inline:

Image Items
Icon Items

Horizontal

Lays out the items in a row instead of the default vertical stack, wrapping onto new lines when the available width runs out. The aria-orientation of the radiogroup follows this parameter, so assistive technology announces the same orientation the eye sees.

Basic
Disabled
Image
Icon

LabelPosition

Places the content of each item on any of the four sides of its radio circle. End is the default and renders the circle first; Start renders the content first and additionally aligns the items to the end of the group, so the circles line up in one column once the group is wider than its items (which is what the FullWidth section combines it with). Top and Bottom stack the content above or below the circle. Items rendered as image or icon tiles lay their own content out and are not affected.

End (default)
Start
Top
Bottom

LabelTemplate

Replaces the plain text label of the ChoiceGroup with fully custom content using the LabelTemplate. The label element itself is still rendered and the group still points its aria-labelledby at it, so whatever the template renders becomes the accessible name of the radio group; keep readable text in there, and reach for AriaLabel or AriaLabelledBy when the template is purely decorative.

Custom label

Item templates

Customizes the item rendering at four different levels, from the smallest scope to the largest: ItemPrefixTemplate and ItemSuffixTemplate add content before and after the built-in item content and leave it in place, ItemLabelTemplate replaces the content next to the radio circle but keeps the circle, and ItemTemplate (or the Template of a single item, which wins over it) takes over the whole item rendering including the circle.

ItemPrefixTemplate & ItemSuffixTemplate
ItemLabelTemplate



ItemTemplate
Item's Template

Binding

Binds the selected value in three ways. DefaultValue only seeds the initial selection and then leaves the ChoiceGroup to own its value, reporting every change through OnChange; this uncontrolled mode is how most of the examples on this page are set up. Value alone is one-way: the model drives the ChoiceGroup and a click cannot write back, so editing the text box below moves the selection but clicking an item does not change the text box. @bind-Value is two-way and keeps the model and the ChoiceGroup in sync in both directions.

Uncontrolled (DefaultValue)

Selected: A
One-way

Two-way

Validation

Integrates with EditForm and data annotations. While the field is invalid the radiogroup and its inputs carry aria-invalid and the radio circles turn red, until a choice is made. Required is separate from the validation attribute of the model: it adds the required asterisk to the label and the aria-required of the group, so set both.

Pick one


Item descriptions

Adds secondary text under each item using the Description property. The description is automatically linked to its input via aria-describedby, so screen readers announce it along with the item label.

Backup frequency

ReadOnly

Prevents changing the value while keeping the normal, non-disabled appearance. Unlike IsEnabled="false" the group stays fully reachable: Tab still lands on the checked item and the arrow keys still move the focus, so the choice can be read with the keyboard and a screen reader, and the value is still submitted with the form. The group reports aria-readonly, and every attempt to commit a change (a click, Space, or an arrow key) is cancelled, so the selection cannot move.

ReadOnly

Gap

Customizes the gap between the items using any CSS length value, overriding the default spacing of the current size.

1rem gap
3rem gap (Horizontal)

Prefix & Suffix

Wraps the content of each item in plain text: Prefix is rendered at the start of the item label, before the item text, and Suffix after the content of the item. Pairing Suffix with FullWidth and an auto inline start margin turns it into a trailing column, which is where a price or a hint usually belongs. For arbitrary content on either end, use the ItemPrefixTemplate and ItemSuffixTemplate shown in the Item templates section.

Shipping method (Prefix)
Shipping method (Suffix)

Events

Raises OnChange with the new value whenever the selection actually changes, and OnClick with the whole item on every activation of an enabled item, including a click on the already selected one and an arrow key press, which the browser also reports as a click. OnFocus and OnBlur fire with the item as the focus moves between the items. All four stay silent while the group is disabled or read-only.

Events
Changed value:
Clicked item:
Focused item:
Blurred item:

Dynamic items

Handles dynamic item collections: assigning a new Items collection re-renders the group and re-assigns the Index of each item (shown here as a number prefix), preserving the selected value as long as its item survives the change.

Dynamic items

Group description

Adds a helper text under the label to explain the whole set of choices, as opposed to the per-item Description that explains a single item. The group points its aria-describedby at it, so a screen reader announces it right after the name of the group. DescriptionTemplate replaces the plain text with custom content and takes precedence over Description when both are set.

Deployment target
Only the selected environment receives the new build.
Deployment target
Only the selected environment receives the new build.

FullWidth

Stretches the ChoiceGroup to the full width of its container instead of letting it hug its widest item, which is what lines a ChoiceGroup up with the other full width fields of a form. In the horizontal layout the items additionally share that width in equal columns. In the vertical layout every item row spans the full width, so LabelPosition.Start now has room to push the items to the far edge; stretching the item label over that row as well turns it into the label-at-the-start, circle-at-the-end list found in settings pages.

Default (hugs the widest item)
FullWidth (horizontal, equal columns)
FullWidth + LabelPosition.Start (items at the far edge)
FullWidth + LabelPosition.Start + stretched item label (settings list)

Item title

Sets the native browser tooltip of an item through its Title, which is handy when the item text is an abbreviation or gets clipped. Keep it supplementary: a title never appears on keyboard focus and is announced inconsistently by screen readers, so anything every user has to read belongs in the item text, its AriaLabel, or its Description.

Delivery window (hover an item)

AutoFocus

Moves the keyboard focus into the ChoiceGroup on its first render. It lands on the checked item, or on the first enabled item when nothing is checked, which is exactly the item the Tab key would reach, and it is skipped entirely while the group is disabled or read-only. The button below mounts a fresh ChoiceGroup so the focus move stays visible on demand instead of stealing the focus as soon as this page loads.

Color

Colors the radio circle and the checked state of the items using the BitColor palette, with Primary being the default.

Primary

Secondary

Tertiary

Info

Success

Warning

SevereWarning

Error


PrimaryBackground

SecondaryBackground

TertiaryBackground

PrimaryForeground

SecondaryForeground

TertiaryForeground

PrimaryBorder

SecondaryBorder

TertiaryBorder


Disabled:

Primary

Secondary

Tertiary

Info

Success

Warning

SevereWarning

Error

PrimaryBackground

SecondaryBackground

TertiaryBackground

PrimaryForeground

SecondaryForeground

TertiaryForeground

PrimaryBorder

SecondaryBorder

TertiaryBorder

External Icons

Renders icons from external libraries like Font Awesome or Bootstrap Icons using the Icon parameter, instead of the built-in icon font used by IconName.


External Icons
External Icons (Inline)
External Icons (Horizontal)

Size

Comes in Small, Medium (default), and Large sizes that scale the radio circle, text, icons, and item spacing together.


Basic ChoiceGroup
Small
Medium
Large


ChoiceGroup with inline icon
Small
Medium
Large


ChoiceGroup with icon
Small
Medium
Large

Style & Class

Customizes the appearance at every level: Style and Class on the root element, per-item styles and classes, and the Styles and Classes objects that target the internal parts of the component, including the checked state of the items.


Component's Style & Class:

Styled ChoiceGroup
Classed ChoiceGroup




Item's Style & Class:





Styles & Classes:

Styles
Classes

RTL

Renders the ChoiceGroup in right-to-left mode; the layout is mirrored and the keyboard arrow keys follow the text direction.

ساده
غیرفعال

API

Every parameter, public member, sub-class and enum this component exposes.

BitChoiceGroup parameters

Name Type Default value Description
AriaLabelledBy string? null Id of an element to use as the aria label for the ChoiceGroup.
AutoFocus bool false Determines if the ChoiceGroup is auto focused on first render, focusing its checked item, or its first enabled item when nothing is checked. Nothing is focused when the ChoiceGroup is read-only or the target item is disabled.
AutoReorderOptions bool false Keeps the assigned Index of each option in sync with the markup order of the options, even when an option is added, removed, or reordered conditionally after the first render.
ChildContent RenderFragment? null The content of the ChoiceGroup, a list of BitChoiceGroupOption components.
Classes BitChoiceGroupClassStyles? null Custom CSS classes for different parts of the BitChoiceGroup.
Color BitColor? null The general color of the ChoiceGroup.
Description string? null The description (helper text) of the ChoiceGroup, rendered under its label. The group references it through its aria-describedby, so screen readers announce it along with the name of the group.
DescriptionTemplate RenderFragment? null Custom RenderFragment for the description (helper text) of the ChoiceGroup. Takes precedence over Description when both are set.
FullWidth bool false Expands the ChoiceGroup to the full width of its container instead of hugging its widest item. In the horizontal layout the items also share that width equally.
Gap string? null The gap between the items of the ChoiceGroup.
Horizontal bool false Renders the items in the ChoiceGroup horizontally.
Inline bool false Renders the icons and images in a single line with the items in the ChoiceGroup.
Items IEnumerable<TItem> new List<TItem>() Sets the data source that populates the items of the list.
ItemLabelTemplate RenderFragment<TItem>? Used to customize the label for the Item Label content.
ItemPrefixTemplate RenderFragment<TItem>? Used to add a prefix to each item.
ItemSuffixTemplate RenderFragment<TItem>? null Used to add a suffix to each item, rendered after the content of the item.
ItemTemplate RenderFragment<TItem>? null Used to customize the label for the Item content.
Label string? null The label for the ChoiceGroup.
LabelPosition BitLabelPosition? null The position of the content of each item relative to its radio circle. Defaults to End, which renders the circle first and the content after it. Items rendered as image or icon tiles lay their own content out and ignore this parameter.
LabelTemplate RenderFragment? null Custom RenderFragment for the label of the ChoiceGroup.
Name string? null The name shared by the radio inputs of the items, which is what groups them into a single logical radio group. When not set, a unique name is generated for the ChoiceGroup.
NameSelectors BitChoiceGroupNameSelectors<TItem, TValue>? null Names and selectors of the custom input type properties.
NoCircle bool false Removes the circle from the start of each item.
OnBlur EventCallback<TItem> Callback for when an item of the ChoiceGroup loses focus.
OnChange EventCallback<TValue?> Callback for when the selected value changes.
OnClick EventCallback<TItem> Callback for when an enabled item is clicked, even the already selected one.
OnFocus EventCallback<TItem> Callback for when an item of the ChoiceGroup receives focus.
Options RenderFragment? null Alias of ChildContent.
ReadOnly bool false Prevents changing the value of the ChoiceGroup while keeping its normal (non-disabled) appearance.
Required bool false Makes the ChoiceGroup required and adds the required asterisk to its label.
Size BitSize? null The size of the BitChoiceGroup.
Styles BitChoiceGroupClassStyles? null Custom CSS styles for different parts of the BitChoiceGroup.

BitInputBase parameters

Name Type Default value Description
DefaultValue TValue? null The default value of the input to be used in uncontrolled mode (i.e. when the Value is not bound), typically used alongside the OnChange callback.
DisplayName string? null Gets or sets the display name for this field.
InputHtmlAttributes IReadOnlyDictionary<string, object>? null Gets or sets a collection of additional attributes that will be applied to the created element.
Name string? null Gets or sets the name of the element. Allows access by name from the associated form.
NoValidate bool false Disables the validation of the input.
OnChange EventCallback<TValue?> Callback for when the input value changes.
ReadOnly bool false Makes the input read-only.
Required bool false Makes the input required.
Value TValue? null Gets or sets the value of the input. This should be used with two-way binding.

BitInputBase public members

Name Type Default value Description
InputElement ElementReference The ElementReference of the input element.
FocusAsync() () => ValueTask Gives focus to the input element.
FocusAsync(bool preventScroll) (bool preventScroll) => ValueTask Gives focus to the input element.

BitComponentBase parameters

Name Type Default value Description
AriaLabel string? null Gets or sets the accessible label for the component, used by assistive technologies.
Class string? null Gets or sets the CSS class name(s) to apply to the rendered element.
Dir BitDir? null Gets or sets the text directionality for the component's content.
ForceAnimation bool false Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id string? null Gets or sets the unique identifier for the component's root element.
IsEnabled bool true Gets or sets a value indicating whether the component is enabled and can respond to user interaction.
Style string? null Gets or sets the CSS style string to apply to the rendered element.
TabIndex string? null Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility BitVisibility BitVisibility.Visible Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name Type Default value Description
UniqueId Guid Guid.NewGuid() Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement ElementReference Gets the reference to the root HTML element associated with this component.

BitChoiceGroupItem properties

Name Type Default value Description
AriaLabel string? null AriaLabel attribute for the BitChoiceGroup item.
Class string? null CSS class attribute for the BitChoiceGroup item.
Description string? null The secondary text to show under the text of the BitChoiceGroup item.
Id string? null Id attribute of the BitChoiceGroup item.
IsEnabled bool true Whether the BitChoiceGroup item is enabled.
Icon BitIconInfo? null The icon to show as content of the BitChoiceGroup item. Takes precedence over IconName when both are set.
IconName string? null The icon name (built-in Fluent UI) to show as content of the BitChoiceGroup item.
ImageSrc string? null The image address to show as the content of the BitChoiceGroup item.
ImageAlt string? null The alt attribute for the image of the BitChoiceGroup item.
ImageSize BitImageSize? null Provides Width and Height for the image of the BitChoiceGroup item.
Prefix string? null The text to show as a prefix for the BitChoiceGroup item.
SelectedImageSrc string? null Provides a new image for the selected state of the image of the BitChoiceGroup item.
Style string? null CSS style attribute for the BitChoiceGroup item.
Suffix string? null The text to show as a suffix for the BitChoiceGroup item, rendered after its content.
Template RenderFragment<BitChoiceGroupItem<TValue>>? null The custom template for the BitChoiceGroup item.
Text string? null Text to show as the content of BitChoiceGroup item.
Title string? null The title attribute (the native tooltip) of the BitChoiceGroup item. Supplementary text only: content that has to reach every user belongs in Text (or a template) or in Description, both of which are visible and exposed to assistive technology. AriaLabel is not an alternative: it only replaces the accessible name for assistive technology and is never visible.
Value TValue? null The value returned when BitChoiceGroup item is checked.
Index int 0 Index of the BitChoiceGroup item. This property's value is set by the component at render.
IsSelected bool false Determines if the item is selected. This property's value is assigned by the component.

BitChoiceGroupOption properties

Name Type Default value Description
AriaLabel string? null AriaLabel attribute for the BitChoiceGroup option.
Class string? null CSS class attribute for the BitChoiceGroup option.
Description string? null The secondary text to show under the text of the BitChoiceGroup option.
Id string? null Id attribute of the BitChoiceGroup option.
IsEnabled bool true Whether the BitChoiceGroup option is enabled.
Icon BitIconInfo? null The icon to show as content of the BitChoiceGroup option. Takes precedence over IconName when both are set.
IconName string? null The icon name (built-in Fluent UI) to show as content of the BitChoiceGroup option.
ImageSrc string? null The image address to show as the content of the BitChoiceGroup option.
ImageAlt string? null The alt attribute for the image of the BitChoiceGroup option.
ImageSize BitImageSize? null Provides Width and Height for the image of the BitChoiceGroup option.
Prefix string? null The text to show as a prefix for the BitChoiceGroup option.
SelectedImageSrc string? null Provides a new image for the selected state of the image of the BitChoiceGroup option.
Style string? null CSS style attribute for the BitChoiceGroup option.
Suffix string? null The text to show as a suffix for the BitChoiceGroup option, rendered after its content.
Template RenderFragment<BitChoiceGroupOption<TValue>>? null The custom template for the BitChoiceGroup option.
Text string? null Text to show as the content of BitChoiceGroup option.
Title string? null The title attribute (the native tooltip) of the BitChoiceGroup option. Supplementary text only: content that has to reach every user belongs in Text (or a template) or in Description, both of which are visible and exposed to assistive technology. AriaLabel is not an alternative: it only replaces the accessible name for assistive technology and is never visible.
Value TValue? null The value returned when BitChoiceGroup option is checked.
Index int 0 Index of the BitChoiceGroup option. This property's value is set by the component at render.
IsSelected bool false Determines if the option is selected. This property's value is assigned by the component.

BitChoiceGroupNameSelectors<TItem, TValue> properties

Name Type Default value Description
AriaLabel BitNameSelectorPair<TItem, string?> new(nameof(BitChoiceGroupItem<TValue>.AriaLabel)) AriaLabel attribute for the BitChoiceGroup option.
Class BitNameSelectorPair<TItem, string?> new(nameof(BitChoiceGroupItem<TValue>.Class)) CSS class attribute for the BitChoiceGroup option.
Description BitNameSelectorPair<TItem, string?> new(nameof(BitChoiceGroupItem<TValue>.Description)) The secondary text to show under the text of the BitChoiceGroup option.
Id BitNameSelectorPair<TItem, string?> new(nameof(BitChoiceGroupItem<TValue>.Id)) Id attribute of the BitChoiceGroup option.
IsEnabled BitNameSelectorPair<TItem, bool> new(nameof(BitChoiceGroupItem<TValue>.IsEnabled)) Whether the BitChoiceGroup option is enabled.
Icon BitNameSelectorPair<TItem, BitIconInfo?> new(nameof(BitChoiceGroupItem<TValue>.Icon)) Icon field name and selector of the custom input class.
IconName BitNameSelectorPair<TItem, string?> new(nameof(BitChoiceGroupItem<TValue>.IconName)) IconName field name and selector of the custom input class.
ImageSrc BitNameSelectorPair<TItem, string?> new(nameof(BitChoiceGroupItem<TValue>.ImageSrc)) The image address to show as the content of the BitChoiceGroup option.
ImageAlt BitNameSelectorPair<TItem, string?> new(nameof(BitChoiceGroupItem<TValue>.ImageAlt)) The alt attribute for the image of the BitChoiceGroup option.
ImageSize BitNameSelectorPair<TItem, BitImageSize?> new(nameof(BitChoiceGroupItem<TValue>.ImageSize)) Provides Width and Height for the image of the BitChoiceGroup option.
Prefix BitNameSelectorPair<TItem, string?> new(nameof(BitChoiceGroupItem<TValue>.Prefix)) The text to show as a prefix for the BitChoiceGroup option.
SelectedImageSrc BitNameSelectorPair<TItem, string?> new(nameof(BitChoiceGroupItem<TValue>.SelectedImageSrc)) Provides a new image for the selected state of the image of the BitChoiceGroup option.
Style BitNameSelectorPair<TItem, string?> new(nameof(BitChoiceGroupItem<TValue>.Style)) CSS style attribute for the BitChoiceGroup option.
Suffix BitNameSelectorPair<TItem, string?> new(nameof(BitChoiceGroupItem<TValue>.Suffix)) The text to show as a suffix for the BitChoiceGroup option, rendered after its content.
Template BitNameSelectorPair<TItem, RenderFragment<TItem>?> new(nameof(BitChoiceGroupItem<TValue>.Template)) Template field name and selector of the custom input class.
Text BitNameSelectorPair<TItem, string?> new(nameof(BitChoiceGroupItem<TValue>.Text)) Text to show as the content of BitChoiceGroup option.
Title BitNameSelectorPair<TItem, string?> new(nameof(BitChoiceGroupItem<TValue>.Title)) The title attribute (the native tooltip) of the BitChoiceGroup option.
Value BitNameSelectorPair<TItem, TValue?> new(nameof(BitChoiceGroupItem<TValue>.Value)) The value returned when BitChoiceGroup option is checked.
Index string nameof(BitChoiceGroupItem<TValue>.Index) The Index field name of the custom input class. This property's value is set by the component at render.
IsSelected string nameof(BitChoiceGroupItem<TValue>.IsSelected) The IsSelected field name of the custom input class. This property's value is assigned by the component.

BitChoiceGroupClassStyles properties

Name Type Default value Description
Root string? null Custom CSS classes/styles for the root element of the BitChoiceGroup.
LabelContainer string? null Custom CSS classes/styles for the label container of the BitChoiceGroup.
Label string? null Custom CSS classes/styles for the label of the BitChoiceGroup.
Description string? null Custom CSS classes/styles for the description (helper text) of the BitChoiceGroup.
Container string? null Custom CSS classes/styles for the container of the BitChoiceGroup.
ItemChecked string? null Custom CSS classes/styles for the checked item of the BitChoiceGroup.
ItemContainer string? null Custom CSS classes/styles for the container of each item of the BitChoiceGroup.
ItemLabel string? null Custom CSS classes/styles for the label of each item of the BitChoiceGroup.
ItemImageContainer string? null Custom CSS classes/styles for the image container of each item of the BitChoiceGroup.
ItemImageWrapper string? null Custom CSS classes/styles for the image wrapper of each item of the BitChoiceGroup.
ItemRadioButton string? null Custom CSS classes/styles for the radio button of each item of the BitChoiceGroup.
ItemImage string? null Custom CSS classes/styles for the image of each item of the BitChoiceGroup.
ItemIconWrapper string? null Custom CSS classes/styles for the icon wrapper of each item of the BitChoiceGroup.
ItemIcon string? null Custom CSS classes/styles for the icon of each item of the BitChoiceGroup.
ItemPrefix string? null Custom CSS classes/styles for the prefix of each item of the BitChoiceGroup.
ItemSuffix string? null Custom CSS classes/styles for the suffix of each item of the BitChoiceGroup.
ItemTextWrapper string? null Custom CSS classes/styles for the text wrapper of each item of the BitChoiceGroup.
ItemText string? null Custom CSS classes/styles for the text of each item of the BitChoiceGroup.
ItemDescription string? null Custom CSS classes/styles for the description of each item of the BitChoiceGroup.

BitIconInfo properties

Name Type Default value Description
Name string? null Gets or sets the name of the icon.
BaseClass string? null Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty.
Prefix string? null Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty.

BitColor enum

Name Value Description
Primary 0 Primary general color.
Secondary 1 Secondary general color.
Tertiary 2 Tertiary general color.
Info 3 Info general color.
Success 4 Success general color.
Warning 5 Warning general color.
SevereWarning 6 SevereWarning general color.
Error 7 Error general color.
PrimaryBackground 8 Primary background color.
SecondaryBackground 9 Secondary background color.
TertiaryBackground 10 Tertiary background color.
PrimaryForeground 11 Primary foreground color.
SecondaryForeground 12 Secondary foreground color.
TertiaryForeground 13 Tertiary foreground color.
PrimaryBorder 14 Primary border color.
SecondaryBorder 15 Secondary border color.
TertiaryBorder 16 Tertiary border color.

BitLabelPosition enum

Name Value Description
Top 0 Renders the content above the radio circle.
End 1 Renders the content after the radio circle. This is the default.
Bottom 2 Renders the content below the radio circle.
Start 3 Renders the content before the radio circle and aligns the items to the end of the group.

BitSize enum

Name Value Description
Small 0 The small size choice group.
Medium 1 The medium size choice group.
Large 2 The large size choice group.

BitVisibility enum

Name Value Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).

BitDir enum

Name Value Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.