ChoiceGroup
Radio
RadioButton
RadioGroup
RadioButtonGroup
Radio
RadioButton
RadioGroup
RadioButtonGroup
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:
1. The BitChoiceGroupItem class
2. A Custom Generic class
3. The 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.
Inline:
Horizontal
Displays the BitChoiceGroup component in a horizontal layout, demonstrating various configurations.
LabelTemplate
Demonstrates how to customize the label of the BitChoiceGroup using a template.
Item templates
Illustrates how to customize the appearance of BitChoiceGroup options using item templates.
Binding
Shows how to use one-way and two-way data binding with BitChoiceGroup.
Validation
Shows how to use data annotations for validating the selected value in BitChoiceGroup.
Size
Varying sizes for BitChoiceGroup tailored to meet diverse design needs, ensuring flexibility and visual hierarchy within your interface.
Basic ChoiceGroup
ChoiceGroup with inline icon
ChoiceGroup with icon
Color
Offering a range of specialized color variants with Primary being the default, providing visual cues for specific actions or states within your application.
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:
RTL
Use BitChoiceGroup in right-to-left (RTL).
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. |
| Color | BitColor? | null | The general color of the ChoiceGroup. |
| DefaultValue | string? | null | Default selected Value for ChoiceGroup. |
| Inline | bool | false | Renders the icons and images in a single line with the items in the 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. |
| NoCircle | bool | false | Removes the circle from the start of each item. |
| OnClick | EventCallback<MouseEventArgs> | Callback for when the option clicked. | |
| Options | RenderFragment? | null | Alias of ChildContent. |
| 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 |
|---|---|---|---|
| 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 | 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
| 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. |
BitColor enum
Name |
Value |
Description |
|---|---|---|
| Primary | 0 | Info 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. |
BitSize enum
Name |
Value |
Description |
|---|---|---|
| Small | 0 | The small size checkbox. |
| Medium | 1 | The medium size checkbox. |
| Large | 2 | The large size checkbox. |
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
You can give us your feedback through our GitHub repo by filing a new Issue or starting a new Discussion.
Or you can review / edit this page on GitHub.
Or you can review / edit this component on GitHub.
- On this page