Basic Form Example

A tutorial to guide you through steps to follow when building a form and related validation

• 1. Create a card with padding
• 2. Add the first field
• 3. Add another field
• 4. Space out the content
• 5. Add more fields
• 6. Add the button
• 7. Next steps

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)