pages._explore-components-interaction-input.title

pages._explore.sections.basic-usage.title

html

<Input
    v-model="rfInputValue"
    placeholder="Enter some text"
/>

typescript

<script setup lang="ts">

// state
const rfInputValue = ref('')
</script>

pages._explore.sections.complex-usage.title

html

<Input
    name="email"
    v-model="rfEmailValue"
    placeholder="Enter your email"
    :field-state="FormFieldState.SUCCESS"
    field-state-icon=
    :update-trigger="InputUpdateTriggerTypes.BLUR"
/>

typescript

<script setup lang="ts">
import { FormFieldState } from '#core-types/components/interaction/form'
import { InputUpdateTriggerTypes } from '#core-types/components/interaction/input'

// state
const rfEmailValue = ref('user@example.com')
</script>

pages._explore.sections.states.title

Default state

Warning state

Error state

Success state

Disabled state

html

<!-- Default state -->
<Input 
    v-model="rfDefaultValue" 
    placeholder="Default input" 
/>

<!-- Warning state -->
<Input 
    v-model="rfWarningValue" 
    placeholder="Warning input"
    :field-state="FormFieldState.WARNING"
    field-state-icon=
/>

<!-- Error state -->
<Input 
    v-model="rfErrorValue" 
    placeholder="Error input"
    :field-state="FormFieldState.ERROR"
    field-state-icon=
/>

<!-- Success state -->
<Input 
    v-model="rfSuccessValue" 
    placeholder="Success input"
    :field-state="FormFieldState.SUCCESS"
    field-state-icon=
/>

<!-- Disabled state -->
<Input 
    v-model="rfDisabledValue" 
    placeholder="Disabled input"
    :field-state="FormFieldState.DISABLED"
    field-state-icon=
/>

typescript

<script setup lang="ts">
import { FormFieldState } from '#core-types/components/interaction/form'

// state
const rfDefaultValue = ref('')
const rfWarningValue = ref('Warning text')
const rfErrorValue = ref('Error text')
const rfSuccessValue = ref('Success text')
const rfDisabledValue = ref('Disabled text')
</script>

Update Triggers

Input trigger (real-time updates)

Value: empty

Blur trigger (updates when field loses focus)

Value: empty

html

<!-- Input trigger (default) -->
<Input 
    v-model="rfInputTriggerValue" 
    placeholder="Updates on input (real-time)"
    :update-trigger="InputUpdateTriggerTypes.INPUT"
/>

<!-- Blur trigger -->
<Input 
    v-model="rfBlurTriggerValue" 
    placeholder="Updates on blur (when field loses focus)"
    :update-trigger="InputUpdateTriggerTypes.BLUR"
/>

typescript

<script setup lang="ts">
import { InputUpdateTriggerTypes } from '#core-types/components/interaction/input'

// state
const rfInputTriggerValue = ref('')
const rfBlurTriggerValue = ref('')
</script>

pages._explore.sections.props.title

Prop	Default	Type
name	undefined	string
placeholder	undefined	string
fieldState	undefined	FormFieldState
fieldStateIcon	undefined	boolean
updateTrigger	InputUpdateTriggerTypes.INPUT	InputUpdateTriggerTypes
modelValue	undefined	string \| undefined

pages._explore.sections.types.title

Name	Type	Options
FormFieldState	enum	DISABLED \| WARNING \| ERROR \| SUCCESS
InputUpdateTriggerTypes	enum	INPUT \| BLUR

pages._explore.sections.emits.title

Event	Type
update:modelValue	string \| undefined