Inputs are the simplest and most used type of form control. Inkline provides you with simple solutions for all the scenarios you will encounter when creating input forms.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<IInput id="test" v-model="value" placeholder="Type something.." />
</template>
Behind the scenes, Inkline uses a native HTML <input> element, meaning that you can use the type property to define the type of the input, such as text, password, date, email, number, and so on. By default, the input type is set to text.
Keep in mind that native input types look and are treated differently in each browser, which is why you should use a custom component to achieve consistency.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<IInput v-model="value" type="text" placeholder="Enter some text.." />
<IInput v-model="value" type="password" placeholder="Enter a password.." />
<IInput v-model="value" type="date" placeholder="Enter a date.." />
<IInput v-model="value" type="email" placeholder="Enter an email.." />
<IInput v-model="value" type="number" placeholder="Enter a number.." />
</template>
Setting the disabled property will disable all interactions with the input component.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<IInput v-model="value" disabled placeholder="Type something.." />
</template>
Setting the readonly property will disable all interactions with the input component, except being able to focus the input.
<script>
export default {
data() {
return {
value: 'This input is readonly.'
};
}
};
</script>
<template>
<IInput v-model="value" readonly placeholder="Type something.." />
</template>
If you need to be able to quickly clear the value of an input, you can add the clearable property to the input component.
<script>
export default {
data() {
return {
value: 'This input is clearable.'
};
}
};
</script>
<template>
<IInput v-model="value" clearable placeholder="Type something.." />
</template>
Inkline allows you to easily add a prefix or suffix to your inputs. Using prefixes and suffixes you can, for example, indicate the input type using an icon or text.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<IInput v-model="value" placeholder="Type something..">
<template #prefix>@</template>
</IInput>
<IInput v-model="value" placeholder="Type something..">
<template #suffix>@</template>
</IInput>
<IInput v-model="value" placeholder="Type something..">
<template #prefix>@</template>
<template #suffix>@</template>
</IInput>
</template>
You can add additional content such as select fields, buttons or plain text, to either side of the input by using the prepend and append slots.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<IInput v-model="value" placeholder="Type something..">
<template #prepend>
<span>https://</span>
</template>
</IInput>
<IInput v-model="value" placeholder="Type something..">
<template #append>
<span>.com</span>
</template>
</IInput>
<IInput v-model="value" placeholder="Type something..">
<template #prepend>
<span>https://</span>
</template>
<template #append>
<span>.com</span>
</template>
</IInput>
</template>
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<IInput v-model="value" placeholder="Type something..">
<template #prepend>
<IButton>Button</IButton>
</template>
</IInput>
<IInput v-model="value" placeholder="Type something..">
<template #append>
<IButton>Button</IButton>
</template>
</IInput>
<IInput v-model="value" placeholder="Type something..">
<template #prepend>
<IButton>Button</IButton>
</template>
<template #append>
<IButton>Button</IButton>
</template>
</IInput>
</template>
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<IInput v-model="value" placeholder="Type something..">
<template #prepend>
<IDropdown>
<IButton>Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
</template>
</IInput>
<IInput v-model="value" placeholder="Type something..">
<template #append>
<IDropdown>
<IButton>Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
</template>
</IInput>
<IInput v-model="value" placeholder="Type something..">
<template #prepend>
<IDropdown>
<IButton>Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
</template>
<template #append>
<IDropdown>
<IButton>Dropdown</IButton>
<template #body>
<IDropdownItem>Action</IDropdownItem>
<IDropdownItem>Another action</IDropdownItem>
<IDropdownItem disabled>Disabled action</IDropdownItem>
<IDropdownDivider />
<IDropdownItem>Separated item</IDropdownItem>
</template>
</IDropdown>
</template>
</IInput>
</template>
You can use the color property to set a light or dark color for your inputs.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<IInput v-model="value" color="light" placeholder="Type something.." />
<IInput v-model="value" color="dark" placeholder="Type something.." />
</template>
You're able to use the size modifier to control the size of your inputs, using one of the available sizes: sm, md, and lg. The default size is set to md.
<script>
export default {
data() {
return {
value: ''
};
}
};
</script>
<template>
<IInput v-model="value" size="sm" placeholder="Type something.." />
<IInput v-model="value" size="md" placeholder="Type something.." />
<IInput v-model="value" size="lg" placeholder="Type something.." />
</template>