Rewrote all the docs - more noob friendly now.
Co-authored-by: Copilot <copilot@github.com>
This commit is contained in:
@@ -1,37 +1,26 @@
|
||||
# RadioGroup
|
||||
|
||||
A group of radio buttons sharing the same `name` attribute. Supports horizontal or vertical layout. One option can be pre-selected.
|
||||
A set of radio buttons where only one option can be selected at a time. Use it when you want the user to pick exactly one value from a short list — pricing plans, delivery options, account types.
|
||||
|
||||
---
|
||||
|
||||
## HTML structure
|
||||
## Quick example
|
||||
|
||||
```
|
||||
div.flex.flex-col.gap-1.5
|
||||
label.text-sm.font-medium ← group label (omitted when empty)
|
||||
{label}
|
||||
div.flex.{direction}.gap-3 ← flex-col or flex-row
|
||||
label.flex.items-center.gap-2.cursor-pointer ← one per option
|
||||
input[type=radio, name, value, class, $$Checked$$]
|
||||
span.text-sm
|
||||
{option label}
|
||||
```csharp
|
||||
new RadioGroup(
|
||||
name: "plan",
|
||||
label: "Select a plan",
|
||||
options: new[]
|
||||
{
|
||||
("free", "Free", true), // pre-selected
|
||||
("pro", "Pro", false),
|
||||
("teams", "Teams", false),
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## CSS mechanics
|
||||
|
||||
| Class | Effect |
|
||||
|---|---|
|
||||
| `accent-primary` | Radio circle color follows `--color-primary` CSS variable |
|
||||
| `h-4 w-4` | 16×16 radio circle |
|
||||
| `cursor-pointer` | Pointer cursor on the label |
|
||||
| `flex-col` (default) | Stacks options vertically |
|
||||
| `flex-row` | Places options side by side |
|
||||
|
||||
---
|
||||
|
||||
## Constructor signature
|
||||
## All the options
|
||||
|
||||
```csharp
|
||||
public RadioGroup(
|
||||
@@ -41,32 +30,47 @@ public RadioGroup(
|
||||
string direction = "flex-col")
|
||||
```
|
||||
|
||||
| Parameter | Description |
|
||||
| Parameter | What it does |
|
||||
|---|---|
|
||||
| `name` | Shared `name` attribute for all radio inputs in the group |
|
||||
| `options` | List of `(Value, Label, Selected)` tuples |
|
||||
| `label` | Optional visible group heading above the options |
|
||||
| `direction` | `"flex-col"` (vertical, default) or `"flex-row"` (horizontal) |
|
||||
| `name` | The shared form field name for all radio buttons in the group. |
|
||||
| `options` | The list of choices. Each is a `(Value, Label, Selected)` tuple. |
|
||||
| `label` | Optional heading displayed above the options. |
|
||||
| `direction` | `"flex-col"` stacks options vertically (default). `"flex-row"` places them side by side. |
|
||||
|
||||
**Option tuple fields:**
|
||||
|
||||
| Field | What it does |
|
||||
|---|---|
|
||||
| `Value` | The string submitted when this option is selected. |
|
||||
| `Label` | The text shown next to the radio button. |
|
||||
| `Selected` | Pre-select this option on render. Only one should be `true`. |
|
||||
|
||||
---
|
||||
|
||||
## Usage examples
|
||||
## Real-world examples
|
||||
|
||||
### Vertical list
|
||||
### Pricing plan selector
|
||||
|
||||
```csharp
|
||||
new RadioGroup(
|
||||
name: "plan",
|
||||
label: "Select a plan",
|
||||
name: "plan",
|
||||
label: "Choose your plan",
|
||||
options: new[]
|
||||
{
|
||||
("free", "Free", true),
|
||||
("pro", "Pro", false),
|
||||
("teams", "Teams", false),
|
||||
("free", "Free — up to 3 projects", true),
|
||||
("pro", "Pro — unlimited projects", false),
|
||||
("enterprise", "Enterprise — custom pricing", false),
|
||||
})
|
||||
```
|
||||
|
||||
### Horizontal inline options
|
||||
Reading on the server:
|
||||
|
||||
```csharp
|
||||
public record Command([property: FromForm] string Plan);
|
||||
// command.Plan == "free" | "pro" | "enterprise"
|
||||
```
|
||||
|
||||
### Horizontal size selector
|
||||
|
||||
```csharp
|
||||
new RadioGroup(
|
||||
@@ -75,26 +79,18 @@ new RadioGroup(
|
||||
direction: "flex-row",
|
||||
options: new[]
|
||||
{
|
||||
("sm", "S", false),
|
||||
("md", "M", true),
|
||||
("lg", "L", false),
|
||||
("sm", "S", false),
|
||||
("md", "M", true),
|
||||
("lg", "L", false),
|
||||
("xl", "XL", false),
|
||||
})
|
||||
```
|
||||
|
||||
### Reading in a form handler
|
||||
|
||||
```csharp
|
||||
public record Command([property: FromForm] string Plan);
|
||||
|
||||
// command.Plan == "free" | "pro" | "teams"
|
||||
```
|
||||
|
||||
### Dynamic options from database
|
||||
### Options built dynamically from the database
|
||||
|
||||
```csharp
|
||||
var options = categories
|
||||
.Select((cat, i) => (cat.Slug, cat.Name, i == 0))
|
||||
.Select((cat, i) => (cat.Slug, cat.Name, i == 0)) // first option pre-selected
|
||||
.ToArray();
|
||||
|
||||
new RadioGroup(name: "category", label: "Category", options: options)
|
||||
@@ -102,6 +98,15 @@ new RadioGroup(name: "category", label: "Category", options: options)
|
||||
|
||||
---
|
||||
|
||||
## How it works
|
||||
|
||||
Each option is a `<label>` element containing a native `<input type="radio">` and a `<span>` with the label text. Because the `<input>` is inside the `<label>`, clicking anywhere on the label text selects the option. All radio buttons in the group share the same `name` attribute — the browser ensures only one can be selected at a time.
|
||||
|
||||
The radio dot colour follows your primary theme colour via `accent-primary`.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Tips and tricks
|
||||
|
||||
- Only one option in the group can have `Selected = true`; if multiple are marked selected the last one wins (standard HTML behavior).
|
||||
|
||||
Reference in New Issue
Block a user