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
Images and Icons
Horizontal
Style & Class
Component's Style & Class:
Item's Style & Class:
Styles & Classes:
Visibility
Visible: [
]
Hidden: [
]
Collapsed: [
]
LabelTemplate
Item Templates
Binding
RTL
Validation
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. | |
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. |
IsRtl | bool | false | Change direction to RTL. |
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. |
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. |
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. |
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. |
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. |
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. |
BitChoiceGroupClassStyles properties
Name |
Type |
Default value |
Description |
---|---|---|---|
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. |
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). |