freesewing/markdown/dev/tutorials/pattern-design/adding-options/en.md

title	order
Adding options	140

We know what our bib should look like, and we have the head measurement to work with. But there's still a number of choices we have to make:

• How large should the neck opening be?
• How wide should the bib be?
• How long should the bib be?

We can make all of these choices for the user and set them in stone, so to speak.

But since we're designing a pattern in code, it's trivial to make our pattern flexible and let the user decide. All we have to do is add options to our part.

Add the neckRatio option

The first option we're going to add controls the ratio between the neck opening and the head circumference. Let's call it neckRatio.

We'll add a new options key to our part object for this:

function draftBib({ part }) {

  return part
}

export const bib = {
  name: 'tutorial.bib',
  draft: draftBib,
  measurements: ['head'],
  // highlight-start
  options: {
    neckRatio: { pct: 80, min: 70, max: 90, menu: 'fit' },
  },
  // highlight-end
}

Can you guess what it means?

• We've added a option of type percentage
• Its minimum value is 70%
• Its maximum value is 90%
• Its default value is 80%
• We've added this option to the fit menu

There are different types of options, but percentages are the most common ones. They are all documented in the part reference docs.

Add the widthRatio and lengthRatio options

Let's do something similar for the width and length of our bib:

options: {
  neckRatio: { pct: 80, min: 70, max: 90, menu: 'fit' },
  widthRatio: { pct: 45, min: 35, max: 55, menu: 'style' },
  lengthRatio: { pct: 75, min: 55, max: 85, menu: 'style' },
}

• We've added widthRatio and lengthRatio options
• We've given all options sensible defaults
• We've given all options sensible maximum and minimum boundaries
• We've added these two new options to the style menu

Later, we'll test-drive our pattern to see how it behaves when we adapt the options between their minimum and maximum values. At that time, we can still tweak these values.

With that out of the way, let's start drawing our bib.

Notes

The menu key on an option does not do anything for our pattern as such. Instead it signals to the frontend that this is how options should be grouped together and presented to the user.