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
Basic
Disabled
Illustrates how to disable the entire BitChoiceGroup and individual items.
Images and Icons
Showcases BitChoiceGroup with image and icon items.
Horizontal
Displays the BitChoiceGroup component in a horizontal layout, demonstrating various configurations.
Style & Class
Explores styling and class customization for BitChoiceGroup, including component styles, custom classes, and detailed style items.
Component's Style & Class:
Item's Style & Class:
Styles & Classes:
LabelTemplate
Demonstrates how to customize the label of the BitChoiceGroup using a template.
Binding
Shows how to use one-way and two-way data binding with BitChoiceGroup.
Item templates
Illustrates how to customize the appearance of BitChoiceGroup options using item templates.
RTL
Use BitChoiceGroup in right-to-left (RTL).
Validation
Shows how to use data annotations for validating the selected value in BitChoiceGroup.
API
BitChoiceGroup parameters
Name |
Type |
Default value |
Description |
|---|---|---|---|
| AriaLabelledBy | string? | null | 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. |
| Horizontal | bool | false | Renders the items in the ChoiceGroup horizontally. |
| 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. |
| Label | string? | null | The label for the ChoiceGroup. |
| LabelTemplate | RenderFragment? | null | Custom RenderFragment for the label of the ChoiceGroup. |
| 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. | |
| 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. |
| Name | string? | null | Gets or sets the name of the element. Allows access by name from the associated form. |
| 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 | 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 | 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. |
| 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 | 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. |
| 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, BitImageSize?> | 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. |
| 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. |
| 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. |
- On this page