Choice

<script lang="ts">
	import Choice from '@tcpsystems/ui/foundation/Choice';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	let features = $state({ metrics: true, tracing: false, alerts: false });
</script>

<Stack>
	<p>Enable features</p>
	<Choice name="features" kind="checkbox" checked={features.metrics} onchange={() => features.metrics = !features.metrics}>Metrics &amp; monitoring</Choice>
	<Choice name="features" kind="checkbox" checked={features.tracing} onchange={() => features.tracing = !features.tracing}>Distributed tracing</Choice>
	<Choice name="features" kind="checkbox" checked={features.alerts} onchange={() => features.alerts = !features.alerts}>Real-time alerts</Choice>
</Stack>

<script lang="ts">
	import Choice from '@tcpsystems/ui/foundation/Choice';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	let priority = $state('high');
</script>

<Stack>
	<p>Set ticket priority</p>
	<Choice name="priority" kind="radio" value="low" checked={priority === 'low'} onchange={() => priority = 'low'}>Low — backlogged tasks</Choice>
	<Choice name="priority" kind="radio" value="medium" checked={priority === 'medium'} onchange={() => priority = 'medium'}>Medium — next sprint</Choice>
	<Choice name="priority" kind="radio" value="high" checked={priority === 'high'} onchange={() => priority = 'high'}>High — this week</Choice>
	<Choice name="priority" kind="radio" value="critical" checked={priority === 'critical'} onchange={() => priority = 'critical'}>Critical — outage</Choice>
</Stack>

<script lang="ts">
	import Choice from '@tcpsystems/ui/foundation/Choice';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	let autoSave = $state(true);
	let darkMode = $state(false);
</script>

<Stack>
	<p>Preferences</p>
	<Choice name="auto-save" kind="switch" checked={autoSave} onchange={() => autoSave = !autoSave}>Auto-save drafts</Choice>
	<Choice name="dark-mode" kind="switch" checked={darkMode} onchange={() => darkMode = !darkMode}>Dark mode</Choice>
</Stack>