import{_ as a,o as i,c as e,ae as t}from"./chunks/framework.C8AWLET_.js";const c=JSON.parse('{"title":"Form Components","description":"","frontmatter":{},"headers":[],"relativePath":"ui/form.md","filePath":"ui/form.md"}'),n={name:"ui/form.md"};function l(h,s,d,p,r,k){return i(),e("div",null,[...s[0]||(s[0]=[t(`

Form Components

SigPro UI provides a complete set of reactive form components including select dropdowns, checkboxes, radio buttons, and range sliders.

Select Dropdown (`_select`)

Creates a reactive dropdown select with options.

javascript

const $role = $('user')

_select({
  label: 'User Role',
  options: [
    { value: 'admin', label: 'Administrator' },
    { value: 'user', label: 'Standard User' },
    { value: 'guest', label: 'Guest' }
  ],
  $value: $role
})

Checkbox (`_checkbox`)

Reactive checkbox with label.

javascript

const $agreed = $(false)

_checkbox({
  label: 'I agree to the terms and conditions',
  $value: $agreed
})

Radio Button (`_radio`)

Radio buttons for selecting one option from a group.

javascript

const $payment = $('credit')

_radio({ name: 'payment', label: 'Credit Card', value: 'credit', $value: $payment })
_radio({ name: 'payment', label: 'PayPal', value: 'paypal', $value: $payment })
_radio({ name: 'payment', label: 'Crypto', value: 'crypto', $value: $payment })

Range Slider (`_range`)

Reactive range slider for numeric values.

javascript

const $volume = $(50)

_range({
  label: 'Volume',
  min: 0,
  max: 100,
  step: 1,
  $value: $volume
})

Complete Form Example

API Reference

`_select`

Prop	Type	Description
`label`	`string`	Field label
`options`	`Array<{value: any, label: string}>`	Select options
`$value`	`Signal<any>`	Selected value signal

`_checkbox`

Prop	Type	Description
`label`	`string`	Checkbox label
`$value`	`Signal<boolean>`	Checked state signal

`_radio`

Prop	Type	Description
`name`	`string`	Radio group name
`label`	`string`	Radio option label
`value`	`any`	Value for this option
`$value`	`Signal<any>`	Group selected value signal

`_range`

Prop	Type	Description
`label`	`string`	Slider label
`min`	`number`	Minimum value
`max`	`number`	Maximum value
`step`	`number`	Step increment
`$value`	`Signal<number>`	Current value signal

`,29)])])}const E=a(n,[["render",l]]);export{c as __pageData,E as default};

Form Components ​

Select Dropdown (_select) ​

Checkbox (_checkbox) ​

Radio Button (_radio) ​

Range Slider (_range) ​

Complete Form Example ​

API Reference ​

_select ​

_checkbox ​

_radio ​

_range ​

Form Components

Select Dropdown (`_select`)

Checkbox (`_checkbox`)

Radio Button (`_radio`)

Range Slider (`_range`)

Complete Form Example

API Reference

`_select`

`_checkbox`

`_radio`

`_range`