CropWatch User Interface

CwRadio

Themed radio input with native form behavior. Group radios by sharing the same name and bind:group value.

Stacked Group

Irrigation mode

Automatic Follow the scheduled automation rules.

Manual Only run when an operator starts a cycle.

Paused Keep the configuration but stop new cycles.

Selected: automatic

<script lang="ts">
	import { CwRadio } from '@cropwatchdevelopment/cwui';

	let irrigationMode = $state('automatic');
</script>

<fieldset>
	<legend>Irrigation mode</legend>
	<CwRadio
		name="irrigation-mode"
		value="automatic"
		label="Automatic"
		description="Follow the scheduled automation rules."
		bind:group={irrigationMode}
	/>
	<CwRadio
		name="irrigation-mode"
		value="manual"
		label="Manual"
		description="Only run when an operator starts a cycle."
		bind:group={irrigationMode}
	/>
</fieldset>

Compact Row

SMS

Push

Channel: email

Disabled Option

Publish scope

All devices Push changes to every greenhouse in the fleet.

Active greenhouse only Limit the rollout to the greenhouse you are viewing.

Archive scope Disabled example for unavailable rollout targets.

Documentation Upgrade

Start here

CwRadio is the library radio input for single-choice selections. Group radios by sharing the same `name` and `bind:group`, then keep the labels specific enough that each option stands on its own.

How to think about it

Bind one shared group value Each radio gets its own `value`, but the whole group points at one shared `bind:group` selection.
Use a common `name` for real form grouping Matching `name` attributes keep the radios behaving like one native radio set during form submission and validation.
Add descriptions only when the options need explanation Simple choices can use label-only radios. Turn on `description` when users need help understanding the impact of each option.

Props and callbacks

For a real radio group, every option should share the same `name` and `bind:group` target.

API	Type	Details
`group`	`CwRadioValue \| null`	Shared selected value for the radio group.
`value` Default: `on`	`CwRadioValue`	Value emitted when this radio becomes selected.
`label`	`string`	Primary radio label.
`description`	`string`	Optional supporting text under the label.
`id`	`string`	Optional explicit input id.
`oninput`	`(value: CwRadioValue, event: Event) => void`	Runs when this radio receives the input event and becomes selected.
`onchange`	`(value: CwRadioValue, event: Event) => void`	Runs when this radio receives the change event and becomes selected.
`...native radio attrs`	`HTMLInputAttributes`	Pass `name`, `required`, `disabled`, `aria-*`, and standard radio attributes through to the real input.

Copy-paste examples

These snippets intentionally show the full public API surface the live demo relies on.

Single-choice settings group

This is the normal form pattern for mutually exclusive options.

<script lang="ts">
	let irrigationMode = $state('automatic');
</script>

<CwRadio
	name="irrigation-mode"
	value="automatic"
	label="Automatic"
	description="Follow the scheduled automation rules."
	bind:group={irrigationMode}
/>
<CwRadio
	name="irrigation-mode"
	value="manual"
	label="Manual"
	description="Only run when an operator starts a cycle."
	bind:group={irrigationMode}
/>

Immediate side effects on selection

Use callbacks when changing the selected option should trigger follow-up work.

<CwRadio
	name="notification-channel"
	value="sms"
	label="SMS"
	oninput={(value) => console.log('input', value)}
	onchange={(value) => savePreference('notificationChannel', value)}
/>