- bit BlazorUI
Home Docs

ChoiceGroup

ChoiceGroup let people select a single option from two or more choices.

Notes

The BitChoiceGroup is a Multi-API component which can accept the list of Items in 3 different ways: BitChoiceGroupItem class, a custom Generic class, and BitChoiceGroupOption component.

Usage

Implementation

BitChoiceGroup parameters
Name
Type
Default value
Description
AriaLabelledBy string string.Empty Id of an element to use as the aria label for the ChoiceGroup.
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.
DefaultValue string? null Default selected Value for 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.
ItemTemplate RenderFragment<TItem>? null Used to customize the label for the Item content.
IsRequired bool false If true, selecting an option is mandatory in the ChoiceGroup.
Label string? null The label for the ChoiceGroup.
LabelTemplate RenderFragment? null Custom RenderFragment for the label of the ChoiceGroup.
LayoutFlow BitLayoutFlow? null The render flow of the items in the ChoiceGroup, Horizontal or Vertical.
Name string Guid.NewGuid().ToString() Name of the ChoiceGroup, this unique name is used to group each item into the same logical component.
NameSelectors BitChoiceGroupNameSelectors<TItem, TValue>? null Names and selectors of the custom input type properties.
OnClick EventCallback<MouseEventArgs> Callback for when the option clicked.
OnChange EventCallback<MouseEventArgs> Callback for when the option has been changed.
Options RenderFragment? null Alias of ChildContent.
Styles BitChoiceGroupClassStyles? null Custom CSS styles for different parts of the BitChoiceGroup.
BitInputBase parameters
Name
Type
Default value
Description
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.
Value TValue? null Gets or sets the value of the input. This should be used with two-way binding.
BitComponentBase parameters
Name
Type
Default value
Description
AriaLabel string? null The aria-label of the control for the benefit of screen readers.
Class string? null Custom CSS class for the root element of the component.
Dir BitDir? null Determines the component direction.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional attributes in addition to the component's parameters.
Id string? null Custom id attribute for the root element. if null the UniqueId will be used instead.
IsEnabled bool true Whether or not the component is enabled.
Style string? null Custom CSS style for the root element of the component.
Visibility BitVisibility BitVisibility.Visible Whether the component is visible, hidden or collapsed.
BitComponentBase public members
Name
Type
Default value
Description
UniqueId Guid Guid.NewGuid() The readonly unique id of the root element. it will be assigned to a new Guid at component instance construction.
RootElement ElementReference The ElementReference of the root element.
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.
Id string? null Id attribute of the BitChoiceGroup item.
IsEnabled bool true Whether the BitChoiceGroup item is enabled.
IconName string? null The icon 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 BitSize? 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.
Template RenderFragment<BitChoiceGroupItem<TValue>>? null The custom template for the BitChoiceGroup item.
Text string? null Text to show as the content of BitChoiceGroup item.
Value string? null The value returned when BitChoiceGroup item is checked.
Index int null Index of the BitChoiceGroup item. This property's value is set by the component at render.
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.
Id string? null Id attribute of the BitChoiceGroup option.
IsEnabled bool true Whether the BitChoiceGroup option is enabled.
IconName string? null The icon 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 BitSize? 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.
Template RenderFragment<BitChoiceGroupOption<TValue>>? null The custom template for the BitChoiceGroup option.
Text string? null Text to show as the content of BitChoiceGroup option.
Value string? null The value returned when BitChoiceGroup option is checked.
Index int null Index of the BitChoiceGroup option. This property's value is set by the component at render.
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.
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.
IconName BitNameSelectorPair<TItem, string?> new(nameof(BitChoiceGroupItem<TValue>.IconName)) The icon to show as content of the BitChoiceGroup option.
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, BitSize?> new(nameof(BitChoiceGroupItem<TValue>.ImageSize)) Provides Width and Height for the image of 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.
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.
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.
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.
Container string? null Custom CSS classes/styles for the container 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.
ItemLabelWrapper string? null Custom CSS classes/styles for the label wrapper 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.
ItemImageDiv string? null Custom CSS classes/styles for the image div of each item of the BitChoiceGroup.
ItemImage string? null Custom CSS classes/styles for the image of each item of the BitChoiceGroup.
ItemIconContainer string? null Custom CSS classes/styles for the icon container 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.
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.
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.