Form

Form Input

template

<template>
  <SBFormInput v-model="state.text" type="text" />

  <!-- Range  -->
  <SBFormInput v-model="state.rangeValue" type="range" min="0" max="50" value="10" />
</template>

import { SBFormInput } from 'superbvue'

export default defineComponent({
  components: {
    SBFormInput
  },
  setup() {
    const state = reactive({
      text: '',
      rangeValue
    })

    return {
      state
    }
  }
})

Output

Value:
Range

jsx

import { SBFormInput } from 'superbvue'

export default defineComponent({
  setup() {
    const state = reactive({
      text: '',
      rangeValue: ''
    })

    return {
      state
    }
  },
  methods: {
    handleSetText(event) {
      this.state.text = event.target.value
    }
  },
  render() {
    return (
      <div>
        <SBFormInput type="text" value={this.state.text} onInput={this.handleSetText} />
        
        // Range
        <SBFormInput value={this.state.rangeValue} type="range" min="0" max="50" value="10" onInput={this.handleSetValue} />
      </div>
    )
  }
})

Output

Value:
Range

Property	Type	Default	Description
placeholder	String
modelValue	String
v-model	String
type	String		type of input. text | password | email| number| url| tel| search| range| color| date| time| datetime |datetime-local| month| week
value	String
class	String
min	String
max	String
step	String
id	String
disable	Boolean
size	String
variant	String		Set background color. primary | secondary | success | danger | warning | info | light | dark

Form Select

template

<template>
  <SBFormSelect v-model="state.selected" :options="state.options" />

</template>

import { SBFormSelect } from 'superbvue'

export default defineComponent({
  components: {
    SBFormSelect
  },
  setup() {
    const state = reactive({
      selected: '',
      options: [
        { text: 'Toggle', value: 'first' },
        { text: 'toggle other', value: 'second' },
        { text: 'I am  Disabled', value: 'third', disabled: true },
        { text: 'Another text with radio', value: { fourth: 4 } }
      ],
    })

    return {
      state
    }
  }
})

Output

Open this select menu Toggletoggle otherI am DisabledAnother text with radio
Selected:

jsx

import { SBFormSelect } from 'superbvue'

export default defineComponent({
  setup() {
    const state = reactive({
      selected: '',
      options: [
        { text: 'Toggle', value: 'first' },
        { text: 'toggle other', value: 'second' },
        { text: 'I am  Disabled', value: 'third', disabled: true },
        { text: 'Another text with radio', value: { fourth: 4 } }
      ],
    })

    return {
      state
    }
  },
  methods: {
    handleSetText(event) {
      this.state.text = event.target.value
    }
  },
  render() {
    return (
      <Fragment>
        <SBFormSelect options={this.state.options} onChange={this.handleSetName} />
      </Fragment>
    )
  }
})

Output

Open this select menu Toggletoggle otherI am DisabledAnother text with radio
Selected:

Property	Type	Default	Description
placeholder	String
modelValue	String
v-model	String
type	String		type of input. text | password | email| number| url| tel| search| range| color| date| time| datetime |datetime-local| month| week
value	String
class	String
min	String
max	String
step	String
id	String
disable	Boolean
size	String
onChange	Function
variant	String		Set background color. primary | secondary | success | danger | warning | info | light | dark