Riupress UI

Appearance

FormSelect ​

Component for selecting one element from the list.

Props ​

size
Component size
type:String
default:md
values:sm, md, lg
items
required
List of options
type:Array as PropType<selectItem[]>
default:[]
disabled
Have disabled state?
type:Boolean>
default:false

Slots ​

default
Default slot for label for select

Events ​

update:modelValue
Updating model

Examples ​

Standard selection list

Returned value:

"2"

html
<form-field name="islist" :model="islist">
  <form-select :items="options" />
</form-field>
ts
const islist = useField('islist', toFieldValidator(zod.string()), { initialValue: '2' })
const options = [
  {
    value: '1',
    option: 'Jan kowalski'
  },
  {
    value: '2',
    option: 'Stanisław Moniuszko'
  },
  {
    value: '3',
    option: 'Bolesław Chrobry'
  }
]

WARNING

The component for proper operation requires placing in the component FormField.

Disabled state
html
<form-field name="islist" :model="islist">
  <form-select :items="options" disabled />
</form-field>