Basic usage

Size

Small

Medium

Large

Choose a shirt size.

<BOBInputRadio @bind-Value="_basic" Label="Size" HelperText="Choose a shirt size.">
    <RadioOption Value="@("small")">Small</RadioOption>
    <RadioOption Value="@("medium")">Medium</RadioOption>
    <RadioOption Value="@("large")">Large</RadioOption>
</BOBInputRadio>

Sizes

Small

Option A

Option B

Medium

Option A

Option B

Large

Option A

Option B

<BOBInputRadio @bind-Value="_small" Size="BOBSize.Small" Label="Small" Orientation="RadioOrientation.Horizontal">
    <RadioOption Value="@("a")">Option A</RadioOption>
    <RadioOption Value="@("b")">Option B</RadioOption>
</BOBInputRadio>
<BOBInputRadio @bind-Value="_medium" Size="BOBSize.Medium" Label="Medium" Orientation="RadioOrientation.Horizontal">
    <RadioOption Value="@("a")">Option A</RadioOption>
    <RadioOption Value="@("b")">Option B</RadioOption>
</BOBInputRadio>
<BOBInputRadio @bind-Value="_large" Size="BOBSize.Large" Label="Large" Orientation="RadioOrientation.Horizontal">
    <RadioOption Value="@("a")">Option A</RadioOption>
    <RadioOption Value="@("b")">Option B</RadioOption>
</BOBInputRadio>

Color

Primary

Option A

Option B

Success

Option A

Option B

Warning

Option A

Option B

<BOBInputRadio @bind-Value="_primary" Color="@PaletteColor.Primary" Label="Primary" Orientation="RadioOrientation.Horizontal">
    <RadioOption Value="@("a")">Option A</RadioOption>
    <RadioOption Value="@("b")">Option B</RadioOption>
</BOBInputRadio>
<BOBInputRadio @bind-Value="_success" Color="@PaletteColor.Success" Label="Success" Orientation="RadioOrientation.Horizontal">
    <RadioOption Value="@("a")">Option A</RadioOption>
    <RadioOption Value="@("b")">Option B</RadioOption>
</BOBInputRadio>
<BOBInputRadio @bind-Value="_warning" Color="@PaletteColor.Warning" Label="Warning" Orientation="RadioOrientation.Horizontal">
    <RadioOption Value="@("a")">Option A</RadioOption>
    <RadioOption Value="@("b")">Option B</RadioOption>
</BOBInputRadio>

Orientation

Horizontal

Option A

Option B

Vertical

Option A

Option B

<BOBInputRadio @bind-Value="_horizontal" Orientation="RadioOrientation.Horizontal" Label="Horizontal">
    <RadioOption Value="@("a")">Option A</RadioOption>
    <RadioOption Value="@("b")">Option B</RadioOption>
</BOBInputRadio>
<BOBInputRadio @bind-Value="_vertical" Orientation="RadioOrientation.Vertical" Label="Vertical">
    <RadioOption Value="@("a")">Option A</RadioOption>
    <RadioOption Value="@("b")">Option B</RadioOption>
</BOBInputRadio>

Clearable

Allow users to clear the selection with a reset action.

Clearable

Option A

Option B

Allow users to clear the selection with a reset action.</p>"""]">
        <BOBInputRadio @bind-Value="_clearable" Clearable="true" ClearText="Clear" Label="Clearable">
            <RadioOption Value="@("a")">Option A</RadioOption>
            <RadioOption Value="@("b")">Option B</RadioOption>
        </BOBInputRadio>

Custom Icons

Heart

Star

<BOBInputRadio @bind-Value="_icon"
               CheckedIcon="@BOBIconKeys.MaterialIconsOutlined.i_favorite"
               UncheckedIcon="@BOBIconKeys.MaterialIconsOutlined.i_favorite_border"
               Color="@PaletteColor.Error">
    <RadioOption Value="@("heart")">Heart</RadioOption>
    <RadioOption Value="@("star")">Star</RadioOption>
</BOBInputRadio>

States

Required*

Option A

Option B

ReadOnly

Option A

Option B

Disabled

Option A

Option B

<BOBInputRadio @bind-Value="_required" Required="true" Label="Required">
    <RadioOption Value="@("a")">Option A</RadioOption>
    <RadioOption Value="@("b")">Option B</RadioOption>
</BOBInputRadio>
<BOBInputRadio @bind-Value="_readonly" ReadOnly="true" Label="ReadOnly">
    <RadioOption Value="@("a")">Option A</RadioOption>
    <RadioOption Value="@("b")">Option B</RadioOption>
</BOBInputRadio>
<BOBInputRadio @bind-Value="_disabled" Disabled="true" Label="Disabled">
    <RadioOption Value="@("a")">Option A</RadioOption>
    <RadioOption Value="@("b")">Option B</RadioOption>
</BOBInputRadio>

Properties

Property	Type	Default	Description
`ChildContent`	`RenderFragment?`		Content rendered inside the component.
`Size`	`BOBSize`	`BOBSize.Medium`	Visual size of the component.
`Color`	`string?`		Text or foreground color. Accepts any valid CSS color value.
`Label`	`string?`		Floating label displayed above the component.
`HelperText`	`string?`		Helper text displayed below the component for additional context.
`Clearable`	`bool`		Clearable.
`ClearText`	`string`	`"Clear"`	Text displayed as the Clear.
`CheckedIcon`	`IconKey?`		Material icon name for the Checked.
`UncheckedIcon`	`IconKey?`		Material icon name for the Unchecked.
`Orientation`	`RadioOrientation`	`RadioOrientation.Vertical`	Orientation.