Barebones Components

Appearance

Return to top
On this page

WARNING

While the documentation is fairly complete, it is still in first draft.

FormInput (BonesFormSelect)

Overview

The Barebones FormSelect component is an select element that is wrapped in a FormGroup component. FormSelect accepts an array of options.

Component parts

Part nameDescription
componentThe components root element.

Props

Prop nameDescription
labelThe label is a string prop and is passed to the FormGroup and used to label the input.
errorThe error is a string prop and is passed to the FormGroup and used to display an error if one exists.
valueThe value prop is the value as set by the parent component.
placeholderThe placeholder prop is a string and sets a placeholder on the input
disabledThe disabled prop is a boolean that sets the disabled state as true or false
formGroupPropsformGroupProps are props that are passed to FormGroup if you'd like to override defaults
optionsoptions actions an array of type SelectOption which is looped through within the select. See types.

Prop Types

FormInputType 

export interface SelectOption {
  label: string;
  value: string;
}

Component Type 

export interface FormInput {
  parts: Parts;
}

Examples

WARNING

Examples use tailwind/salient theme, to use this theme you may add it using the theme npx command and installing Tailwind JIT in your application. Read more about themes.

Code 

<script setup>
  /* */
  const formData = reactive({
    film: "goodfellas",
  });

  const films =  [
    { label: "Bronx Tale", value: "bronx-tale" },
    { label: "Goodfellas", value: "goodfellas" },
  ];
  /* */
</script>

<BaseForm action="/save-favorite-movie">
  <BonesFormSelect
    name="film"
    label="Favorite Film"
    v-model:value="formData.film"
    :options="films"
  />
</BaseForm>

Output