Form components

BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInputDocumentation.razor

@@ -0,0 +1,42 @@
+@page "/checkbox-input"
+
+@attribute [Route(pageUrl)]
+
+<PageMetaTags PageUrl="@pageUrl"
+              Title="@metaTitle"
+              Description="@metaDescription"
+              ImageUrl="@imageUrl" />
+
+<PageHero Heading="@pageTitle">
+    <LeadSection>@pageDescription</LeadSection>
+</PageHero>
+
+<CarbonAds />
+
+<Section Size="HeadingSize.H2" Name="Basic usage" PageUrl="@pageUrl" Link="basic-usage">
+    <Demo Type="typeof(CheckboxInput_Demo_01_Basic_Usage)" Tabs="true" />
+</Section>
+
+<Section Size="HeadingSize.H2" Name="Disable" PageUrl="@pageUrl" Link="disable">
+    <div class="mb-3">Use the <code>Disabled</code> parameter to disable the <code>CheckboxInput</code>.</div>
+    <Demo Type="typeof(CheckboxInput_Demo_02_Disable_A)" Tabs="false" />
+    <div class="my-3">Also, use <b>Enable()</b> and <b>Disable()</b> methods to enable and disable the <code>CheckboxInput</code>.</div>
+    <Callout Color="CalloutColor.Warning" Heading="NOTE">
+        Do not use both the <b>Disabled</b> parameter and <b>Enable()</b> &amp; <b>Disable()</b> methods.
+    </Callout>
+    <Demo Type="typeof(CheckboxInput_Demo_02_Disable_B)" Tabs="false" />
+</Section>
+
+<Section Size="HeadingSize.H2" Name="Events: ValueChanged" PageUrl="@pageUrl" Link="events-value-changed">
+    <div class="mb-3">This event fires when the <code>CheckboxInput</code> value changes, but not on every keystroke.</div>
+    <Demo Type="typeof(CheckboxInput_Demo_03_Events_ValueChanged)" Tabs="true" />
+</Section>
+
+@code {
+    private const string pageUrl = RouteConstants.Demos_CheckboxInput_Documentation;
+    private const string pageTitle = "Blazor CheckboxInput";
+    private const string pageDescription = "The Blazor Bootstrap CheckboxInput component is constructed using an HTML input of type 'checkbox'.";
+    private const string metaTitle = "Blazor CheckboxInput Component";
+    private const string metaDescription = "The Blazor Bootstrap CheckboxInput component is constructed using an HTML input of type 'checkbox'.";
+    private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_01_Basic_Usage.razor

@@ -0,0 +1,8 @@
+<CheckboxInput Label="Default checkbox" @bind-Value="isChecked" />
+<CheckboxInput Label="Checked checkbox" @bind-Value="isChecked2" />
+
+@code
+{
+    private bool isChecked;
+    private bool isChecked2 = true;
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_02_Disable_A.razor

@@ -0,0 +1,22 @@
+<CheckboxInput Label="Default checkbox" @bind-Value="isChecked" Disabled="disabled" />
+<CheckboxInput Label="Checked checkbox" @bind-Value="isChecked2" Disabled="disabled" />
+
+<div class="mt-3">
+    <Button Color="ButtonColor.Primary" Size="ButtonSize.ExtraSmall" @onclick="Enable"> Enable </Button>
+    <Button Color="ButtonColor.Secondary" Size="ButtonSize.ExtraSmall" @onclick="Disable"> Disable </Button>
+    <Button Color="ButtonColor.Warning" Size="ButtonSize.ExtraSmall" @onclick="Toggle"> Toggle </Button>
+</div>
+
+@code
+{
+    private bool isChecked;
+    private bool isChecked2 = true;
+
+    private bool disabled = true;
+
+    private void Enable() => disabled = false;
+
+    private void Disable() => disabled = true;
+
+    private void Toggle() => disabled = !disabled;
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_02_Disable_B.razor

@@ -0,0 +1,28 @@
+<CheckboxInput @ref="checkboxInputRef1" Label="Default checkbox" @bind-Value="isChecked" />
+<CheckboxInput @ref="checkboxInputRef2" Label="Checked checkbox" @bind-Value="isChecked2" />
+
+<div class="mt-3">
+    <Button Color="ButtonColor.Primary" Size="ButtonSize.ExtraSmall" @onclick="Enable"> Enable </Button>
+    <Button Color="ButtonColor.Secondary" Size="ButtonSize.ExtraSmall" @onclick="Disable"> Disable </Button>
+</div>
+
+@code
+{
+    private CheckboxInput? checkboxInputRef1;
+    private CheckboxInput? checkboxInputRef2;
+
+    private bool isChecked;
+    private bool isChecked2 = true;
+
+    private void Disable()
+    {
+        checkboxInputRef1.Disable();
+        checkboxInputRef2.Disable();
+    }
+
+    private void Enable()
+    {
+        checkboxInputRef1.Enable();
+        checkboxInputRef2.Enable();
+    }
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/CheckboxInput/CheckboxInput_Demo_03_Events_ValueChanged.razor

@@ -0,0 +1,13 @@
+<CheckboxInput Label="Default checkbox" Value="isChecked" ValueExpression="() => isChecked" ValueChanged="(value) => CheckboxValueChanged(value)" />
+Current value: @isChecked
+@code
+{
+    private bool isChecked;
+
+    private void CheckboxValueChanged(bool value)
+    {
+        isChecked = value;
+
+        // do something
+    }
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInputDocumentation.razor

@@ -0,0 +1,42 @@
+@page "/radio-input"
+
+@attribute [Route(pageUrl)]
+
+<PageMetaTags PageUrl="@pageUrl"
+              Title="@metaTitle"
+              Description="@metaDescription"
+              ImageUrl="@imageUrl" />
+
+<PageHero Heading="@pageTitle">
+    <LeadSection>@pageDescription</LeadSection>
+</PageHero>
+
+<CarbonAds />
+
+<Section Size="HeadingSize.H2" Name="Basic usage" PageUrl="@pageUrl" Link="basic-usage">
+    <Demo Type="typeof(RadioInput_Demo_01_Basic_Usage)" Tabs="true" />
+</Section>
+
+<Section Size="HeadingSize.H2" Name="Disable" PageUrl="@pageUrl" Link="disable">
+    <div class="mb-3">Use the <code>Disabled</code> parameter to disable the <code>RadioInput</code>.</div>
+    <Demo Type="typeof(RadioInput_Demo_02_Disable_A)" Tabs="false" />
+    <div class="my-3">Also, use <b>Enable()</b> and <b>Disable()</b> methods to enable and disable the <code>RadioInput</code>.</div>
+    <Callout Color="CalloutColor.Warning" Heading="NOTE">
+        Do not use both the <b>Disabled</b> parameter and <b>Enable()</b> &amp; <b>Disable()</b> methods.
+    </Callout>
+    <Demo Type="typeof(RadioInput_Demo_02_Disable_B)" Tabs="false" />
+</Section>
+
+<Section Size="HeadingSize.H2" Name="Events: ValueChanged" PageUrl="@pageUrl" Link="events-value-changed">
+    <div class="mb-3">This event fires when the <code>RadioInput</code> value changes, but not on every keystroke.</div>
+    <Demo Type="typeof(RadioInput_Demo_03_Events_ValueChanged)" Tabs="true" />
+</Section>
+
+@code {
+    private const string pageUrl = RouteConstants.Demos_RadioInput_Documentation;
+    private const string pageTitle = "Blazor RadioInput";
+    private const string pageDescription = "The Blazor Bootstrap RadioInput component is constructed using an HTML input of type 'radio'.";
+    private const string metaTitle = "Blazor RadioInput Component";
+    private const string metaDescription = "The Blazor Bootstrap RadioInput component is constructed using an HTML input of type 'radio'.";
+    private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_01_Basic_Usage.razor

@@ -0,0 +1,9 @@
+<p>Would you like to receive notifications?</p>
+<RadioInput Name="EnableNotifications" Label="Yes" @bind-Value="isChecked" />
+<RadioInput Name="EnableNotifications" Label="No" @bind-Value="isChecked2" />
+
+@code
+{
+    private bool isChecked;
+    private bool isChecked2 = true;
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_02_Disable_A.razor

@@ -0,0 +1,23 @@
+<p>Would you like to receive notifications?</p>
+<RadioInput Name="EnableNotifications" Label="Yes" @bind-Value="isChecked" Disabled="disabled" />
+<RadioInput Name="EnableNotifications" Label="No" @bind-Value="isChecked2" Disabled="disabled" />
+
+<div class="mt-3">
+    <Button Color="ButtonColor.Primary" Size="ButtonSize.ExtraSmall" @onclick="Enable"> Enable </Button>
+    <Button Color="ButtonColor.Secondary" Size="ButtonSize.ExtraSmall" @onclick="Disable"> Disable </Button>
+    <Button Color="ButtonColor.Warning" Size="ButtonSize.ExtraSmall" @onclick="Toggle"> Toggle </Button>
+</div>
+
+@code
+{
+    private bool isChecked;
+    private bool isChecked2 = true;
+
+    private bool disabled = true;
+
+    private void Enable() => disabled = false;
+
+    private void Disable() => disabled = true;
+
+    private void Toggle() => disabled = !disabled;
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_02_Disable_B.razor

@@ -0,0 +1,29 @@
+<p>Would you like to receive notifications?</p>
+<RadioInput @ref="radioInputRef" Name="EnableNotifications" Label="Yes" @bind-Value="isChecked" />
+<RadioInput @ref="radioInputRef2" Name="EnableNotifications" Label="No" @bind-Value="isChecked2" />
+
+<div class="mt-3">
+    <Button Color="ButtonColor.Primary" Size="ButtonSize.ExtraSmall" @onclick="Enable"> Enable </Button>
+    <Button Color="ButtonColor.Secondary" Size="ButtonSize.ExtraSmall" @onclick="Disable"> Disable </Button>
+</div>
+
+@code
+{
+    private RadioInput? radioInputRef;
+    private RadioInput? radioInputRef2;
+
+    private bool isChecked;
+    private bool isChecked2 = true;
+
+    private void Disable()
+    {
+        radioInputRef.Disable();
+        radioInputRef2.Disable();
+    }
+
+    private void Enable()
+    {
+        radioInputRef.Enable();
+        radioInputRef2.Enable();
+    }
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/RadioInput/RadioInput_Demo_03_Events_ValueChanged.razor

@@ -0,0 +1,22 @@
+<RadioInput Name="EnableNotifications" Label="Yes" Value="isYesChecked" ValueExpression="() => isYesChecked" ValueChanged="(value) => YesOptionSelectionChanged(value)" />
+<RadioInput Name="EnableNotifications" Label="No" Value="isNoChecked" ValueExpression="() => isNoChecked" ValueChanged="(value) => NoOptionSelectionChanged(value)" />
+
+@code
+{
+    private bool isYesChecked;
+    private bool isNoChecked;
+
+    private void YesOptionSelectionChanged(bool value)
+    {
+        isYesChecked = value;
+
+        // do something
+    }
+
+    private void NoOptionSelectionChanged(bool value)
+    {
+        isYesChecked = value;
+
+        // do something
+    }
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInputDocumentation.razor

@@ -0,0 +1,60 @@
+@page "/text-area-input"
+
+@attribute [Route(pageUrl)]
+
+<PageMetaTags PageUrl="@pageUrl"
+              Title="@metaTitle"
+              Description="@metaDescription"
+              ImageUrl="@imageUrl" />
+
+<PageHero Heading="@pageTitle">
+    <LeadSection>@pageDescription</LeadSection>
+</PageHero>
+
+<CarbonAds />
+
+<Section Size="HeadingSize.H2" Name="Basic usage" PageUrl="@pageUrl" Link="basic-usage">
+    <Demo Type="typeof(TextAreaInput_Demo_01_Basic_Usage)" Tabs="true" />
+</Section>
+
+<Section Size="HeadingSize.H2" Name="Text alignment" PageUrl="@pageUrl" Link="text-alignment">
+    <div class="mb-3">You can change the text alignment according to your need. Use the <code>TextAlignment</code> parameter to set the alignment. In the below example, alignment is set to center and end.</div>
+    <Demo Type="typeof(TextAreaInput_Demo_02_Text_Alignment)" Tabs="true" />
+</Section>
+
+<Section Size="HeadingSize.H2" Name="Disable" PageUrl="@pageUrl" Link="disable">
+    <div class="mb-3">Use the <code>Disabled</code> parameter to disable the <code>TextAreaInput</code>.</div>
+    <Demo Type="typeof(TextAreaInput_Demo_03_Disable_A)" Tabs="false" />
+    <div class="my-3">Also, use <b>Enable()</b> and <b>Disable()</b> methods to enable and disable the <code>TextAreaInput</code>.</div>
+    <Callout Color="CalloutColor.Warning" Heading="NOTE">
+        Do not use both the <b>Disabled</b> parameter and <b>Enable()</b> &amp; <b>Disable()</b> methods.
+    </Callout>
+    <Demo Type="typeof(TextAreaInput_Demo_03_Disable_B)" Tabs="false" />
+</Section>
+
+<Section Size="HeadingSize.H2" Name="Max length" PageUrl="@pageUrl" Link="max-length">
+    <Demo Type="typeof(TextAreaInput_Demo_04_MaxLength)" Tabs="true" />
+</Section>
+
+<Section Size="HeadingSize.H2" Name="Valdations" PageUrl="@pageUrl" Link="validations">
+    <div class="mb-3">
+        Like any other blazor input component, <code>TextAreaInput</code> supports validations.
+        Add the DataAnnotations on the <code>TextAreaInput</code> component to validate the user input before submitting the form.
+        In the below example, we used <b>Required</b> attribute.
+    </div>
+    <Demo Type="typeof(TextAreaInput_Demo_05_Validations)" Tabs="true" />
+</Section>
+
+<Section Size="HeadingSize.H2" Name="Events: ValueChanged" PageUrl="@pageUrl" Link="events-value-changed">
+    <div class="mb-3">This event fires when the <code>TextAreaInput</code> value changes, but not on every keystroke.</div>
+    <Demo Type="typeof(TextAreaInput_Demo_06_Events_ValueChanged)" Tabs="true" />
+</Section>
+
+@code {
+    private const string pageUrl = RouteConstants.Demos_TextAreaInput_Documentation;
+    private const string pageTitle = "Blazor TextAreaInput";
+    private const string pageDescription = "The Blazor Bootstrap TextAreaInput component provides a multi-line plain-text editing control, ideal for scenarios requiring users to input substantial amounts of free-form text. Common use cases include comment sections on reviews or feedback forms.";
+    private const string metaTitle = "Blazor TextAreaInput Component";
+    private const string metaDescription = "The Blazor Bootstrap TextAreaInput component provides a multi-line plain-text editing control, ideal for scenarios requiring users to input substantial amounts of free-form text. Common use cases include comment sections on reviews or feedback forms.";
+    private const string imageUrl = "https://i.imgur.com/1mVjqQv.png"; // TODO: Update image URL
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_01_Basic_Usage.razor

@@ -0,0 +1,8 @@
+<div class="mb-3">
+    <TextAreaInput @bind-Value="@enteredText" Rows="3" />
+</div>
+<div class="mb-3">Entered text: @enteredText</div>
+
+@code {
+    private string? enteredText = null;
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_02_Text_Alignment.razor

@@ -0,0 +1,13 @@
+<div class="mb-3">
+    <TextAreaInput @bind-Value="@enteredText" Rows="3" TextAlignment="Alignment.Center" />
+</div>
+<div class="mb-3">Entered text: @enteredText</div>
+<div class="mb-3">
+    <TextAreaInput @bind-Value="@enteredText2" Rows="3" TextAlignment="Alignment.End" />
+</div>
+<div class="mb-3">Entered text: @enteredText2</div>
+
+@code {
+    private string? enteredText = "sample text";
+    private string? enteredText2 = "sample text 2";
+}

BlazorBootstrap.Demo.RCL/Components/Pages/Form/TextAreaInput/TextAreaInput_Demo_03_Disable_A.razor

@@ -0,0 +1,20 @@
+<div class="mb-3">
+    <TextAreaInput @bind-Value="@enteredText" Rows="3" Disabled="@disabled" Placeholder="Enter text" />
+</div>
+<div class="mb-3">Entered text: @enteredText</div>
+
+<Button Color="ButtonColor.Primary" @onclick="Enable"> Enable </Button>
+<Button Color="ButtonColor.Secondary" @onclick="Disable"> Disable </Button>
+<Button Color="ButtonColor.Warning" @onclick="Toggle"> Toggle </Button>
+
+@code {
+    private string? enteredText = null;
+
+    private bool disabled = true;
+
+    private void Enable() => disabled = false;
+
+    private void Disable() => disabled = true;
+
+    private void Toggle() => disabled = !disabled;
+}