Skip to content

new(component): radio-group #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LineIndent merged 1 commit into from
Aug 7, 2026
Merged

new(component): radio-group #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 64 additions & 65 deletions assets/docs/components/field.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ class ClassNames:

FIELD_CONTENT = "group/field-content flex flex-1 flex-col gap-0.5 leading-snug"

FIELD_LABEL = "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border border-input *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col"
FIELD_LABEL = "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[:checked]:border-primary/30 has-[:checked]:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border border-input *:data-[slot=field]:p-2.5 dark:has-[:checked]:border-primary/20 dark:has-[:checked]:bg-primary/10 has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col"

FIELD_TITLE = "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50"

Expand Down Expand Up @@ -296,51 +296,50 @@ field = Field()

A single control with label, helper text, and validation.

```python
```text
field.root
├── field.label
├── Input / Textarea / switch.root / select.root
├── field.description
└── field.error
|- field.label
|- Input / Textarea / switch.root / select.root
|- field.description
\- field.error
```

## field.group

Related fields in one group. Use `field.separator` between sections when needed.

```python
```text
field.group
├── field.root
│ ├── field.label
│ ├── Input / Textarea / switch.root / select.root
│ ├── field.description
│ └── field.error
├── field.separator
└── field.root
├── field.label
└── Input / Textarea / switch.root / select.root
|- field.root
| |- field.label
| |- Input / Textarea / switch.root / select.root
| |- field.description
| \- field.error
|- field.separator
\- field.root
|- field.label
\- Input / Textarea / switch.root / select.root
```

## field.set

Semantic grouping with a legend and description, usually containing a `field.group`.

```python
```text
field.set
├── field.legend
├── field.description
└── field.group
├── field.root
│ ├── field.label
│ ├── Input / Textarea / switch.root / select.root
│ ├── field.description
│ └── field.error
└── field.root
├── field.label
└── Input / Textarea / switch.root / select.root
|- field.legend
|- field.description
\- field.group
|- field.root
| |- field.label
| |- Input / Textarea / switch.root / select.root
| |- field.description
| \- field.error
\- field.root
|- field.label
\- Input / Textarea / switch.root / select.root
```


- `field.root` is the core wrapper for a single field.

- `field.content` is a flex column that groups label and description. Not required if you have no description.
Expand Down Expand Up @@ -501,9 +500,9 @@ def field_demo() -> rx.Component:

# Responsive Layout

- **Vertical fields**: Default orientation stacks label, control, and helper text—ideal for mobile-first layouts.
- **Vertical fields**: Default orientation stacks label, control, and helper text—ideal for mobile-first layouts.

- **Horizontal fields**: Set `orientation="horizontal"` on `field.root` to align the label and control side-by-side. Pair with `field.content` to keep descriptions aligned.
- **Horizontal fields**: Set `orientation="horizontal"` on `field.root` to align the label and control side-by-side. Pair with `field.content` to keep descriptions aligned.

- **Responsive fields**: Set `orientation="responsive"` for automatic column layouts inside container-aware parents.

Expand All @@ -530,9 +529,9 @@ field.root(

Container that renders a semantic `fieldset` with spacing presets.

| Prop | Type | Default |
| --- | --- | --- |
| `class_name` | `str` | |
| Prop | Type | Default |
| ------------ | ----- | ------- |
| `class_name` | `str` | |

```python
field.set(
Expand All @@ -545,10 +544,10 @@ field.set(

Legend element for a `field.set`. Switch to the `"label"` variant to align with standard label sizing.

| Prop | Type | Default |
| --- | --- | --- |
| `variant` | `Literal["legend", "label"]` | `"legend"` |
| `class_name` | `str` | |
| Prop | Type | Default |
| ------------ | ---------------------------- | ---------- |
| `variant` | `Literal["legend", "label"]` | `"legend"` |
| `class_name` | `str` | |

```python
field.legend("Notification Preferences", variant="label")
Expand All @@ -560,9 +559,9 @@ The `field.legend` has two variants: `legend` and `label`. The `label` variant a

Layout wrapper that stacks `field.root` components and enables container queries for responsive orientations.

| Prop | Type | Default |
| --- | --- | --- |
| `class_name` | `str` | |
| Prop | Type | Default |
| ------------ | ----- | ------- |
| `class_name` | `str` | |

```python
field.group(
Expand All @@ -576,11 +575,11 @@ field.group(

The core wrapper for a single field. Provides orientation control, invalid state styling, and spacing configurations.

| Prop | Type | Default |
| --- | --- | --- |
| `orientation` | `"vertical" | "horizontal" | "responsive"` | `"vertical"` |
| `class_name` | `str` | |
| `data_invalid` | `str` | |
| Prop | Type | Default |
| -------------- | ----------- | ------------ | ------------- | ------------ |
| `orientation` | `"vertical" | "horizontal" | "responsive"` | `"vertical"` |
| `class_name` | `str` | |
| `data_invalid` | `str` | |

```python
field.root(
Expand All @@ -594,9 +593,9 @@ field.root(

Flex column that groups control and descriptions when the label sits beside the control. Not required if you have no layout description block.

| Prop | Type | Default |
| --- | --- | --- |
| `class_name` | `str` | |
| Prop | Type | Default |
| ------------ | ----- | ------- |
| `class_name` | `str` | |

```python
field.root(
Expand All @@ -612,10 +611,10 @@ field.root(

Label styled for both direct inputs and nested `field` child items.

| Prop | Type | Default |
| --- | --- | --- |
| `html_for` | `str` | |
| `class_name` | `str` | |
| Prop | Type | Default |
| ------------ | ----- | ------- |
| `html_for` | `str` | |
| `class_name` | `str` | |

```python
field.label("Email", html_for="email")
Expand All @@ -625,9 +624,9 @@ field.label("Email", html_for="email")

Renders a standalone title with matching label typography properties inside a `field.content` node block.

| Prop | Type | Default |
| --- | --- | --- |
| `class_name` | `str` | |
| Prop | Type | Default |
| ------------ | ----- | ------- |
| `class_name` | `str` | |

```python
field.content(
Expand All @@ -640,9 +639,9 @@ field.content(

Helper text slot that automatically line-balances lengthy strings cleanly when utilized inside horizontal configurations.

| Prop | Type | Default |
| --- | --- | --- |
| `class_name` | `str` | |
| Prop | Type | Default |
| ------------ | ----- | ------- |
| `class_name` | `str` | |

```python
field.description("We never share your email with anyone.")
Expand All @@ -652,9 +651,9 @@ field.description("We never share your email with anyone.")

Visual divider rule used to separate sections or categories inside a wrapping `field.group` component. Accepts optional inline children contents.

| Prop | Type | Default |
| --- | --- | --- |
| `class_name` | `str` | |
| Prop | Type | Default |
| ------------ | ----- | ------- |
| `class_name` | `str` | |

```python
field.separator("Or continue with")
Expand All @@ -664,9 +663,9 @@ field.separator("Or continue with")

Accessible error notification typography container block configured automatically with standard application state layout variables (`role="alert"`).

| Prop | Type | Default |
| --- | --- | --- |
| `class_name` | `str` | |
| Prop | Type | Default |
| ------------ | ----- | ------- |
| `class_name` | `str` | |

```python
field.error("Invalid passcode combination provided.")
Expand Down
9 changes: 1 addition & 8 deletions assets/docs/components/menu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -193,27 +193,21 @@ class MenuItem(CoreComponent):
props["data-slot"] = "menu-item"
cls.set_class_name(ClassNames.ITEM, props)

# 0. Pop out the variant prop so we can apply the data-variant attribute
variant = props.pop("variant", "default")
props["data-variant"] = (
variant # This maps to your Tailwind: data-[variant=destructive]
)
props["data-variant"] = variant

item_id = props.get("id") or f"menu-item-{next(_menu_item_counter)}"
props["id"] = item_id

# 1. Pop out any existing user on_click triggers
user_on_click = props.pop("on_click", None)
click_events = []

# 2. Append the user's custom event(s) if they provided any
if user_on_click is not None:
if isinstance(user_on_click, list):
click_events.extend(user_on_click)
else:
click_events.append(user_on_click)

# 3. If close_on_click is active, append the parent-closing script
if close_on_click:
close_script = rx.call_script(
f"""
Expand All @@ -224,7 +218,6 @@ class MenuItem(CoreComponent):
)
click_events.append(close_script)

# 4. Bind the combined chain back to props if there's anything to execute
if click_events:
props["on_click"] = click_events

Expand Down
Loading
Loading