# Basic Form Recipe
A tutorial to guide you through steps to follow when building a form and related validation
Here we have a basic form, composed entirely of Skyline Vue components, without any custom CSS! Below you'll find a tutorial to guide you through steps to follow when building the form.
# 1. Create a card with padding
You can start with a SkyCard
, using its padded
attribute to automatically
give space between the card's borders and its content.
# 2. Add the first field
Start with a basic text input for the "Name" field. To create this, you can
wrap SkyInputText
component in SkyInputContainer
to provide a label and
accessibility attribute bindings between the two.
You're using two slots (opens new window)
in SkyInputContainer
- one for the label (the #label
slot) and one for the
input element (the #default
slot). The default slot can contain various
Skyline input components, such as SkyInputText
or SkyInputRadio
.
The default
slot is also a scoped slot (opens new window),
meaning that it passes along properties that can be bound to the child form
component. Specifically, you want to bind the attrs
object, which contains
various ARIA attributes to attach to the text input, so that you don't have to
do it manually.
# 3. Add another field
Now, you'll add another field to the form. This time, you'll use SkyInputRadio
to build a group of radio buttons.
When you put multiple form elements inside a SkyInputContainer
, you'll use
the grouped
prop. This ensures that the right HTML attributes are applied,
primarily for accessibility reasons.
# 4. Space out the content
Right now there isn't any vertical space between the two form fields that you've
added. You can fix this by using the SkyStack
, which adds an even amount of
spacing between all of its child elements.
The size
property of SkyStack
lets you choose the amount of spacing between
each element using a spacing unit.
# 5. Add more fields
Now that you have space between components, you can add the remaining fields to the form, which will consist of a select list and another text field.
# 6. Add the button
Finally, finish up your form by adding a submit button!
# 7. Next steps
Now that you have the initial form built, here's a few things that you could do next:
- Adding more form elements
- Adding input validation using Vee Validate (opens new window)
- Hooking up the form's submit handler using an event listener (opens new window)