2.12 Select

In the Figmaster - Lessons Figma file, open the 2.12 Select page.

Introduction

The select component allows users to choose one option from a list. It is used in forms for users to submit data. In this chapter, you will use the principles from the 2.7 Input and 2.6 Dropdown chapters because the components will be very similar. Below, you will find all the necessary details for the components.

Step 1. Select

Part 1. Select / Default

  1. Text: Select.
  2. Text Style: Text M/Regular.
  3. Text Color: Neutral/70.
  4. Icon on the right: Icon / CaretDown.
  5. Icon size: 16px.
  6. Icon color: Neutral/90.
  7. Text Resizing (width): Fill container.
  8. Padding Left and Right: 12 px.
  9. Padding Top and Bottom: 6 px.
  10. Spacing between items: 4 px.
  11. Fill: Neutral/10.
  12. Stroke: 1px Neutral/50 Inside.
  13. Effect: Shadow 1.
  14. Border radius: 4 px.

Part 2. Select / Hover

Duplicate Select / Default and transform it to Select / Hover with the following settings:

  1. Stroke color: Primary/Main.

Part 3. Select / Focused

Duplicate Select / Hover and transform it to Select / Focused with the following settings:

  1. Effects: none.
  2. Stroke: 3 px Primary/Main Outside.

Part 4. Select / Filled.

Duplicate Select / Default and transform it to Select / Filled with the following settings:

  1. Text: Selected Option.
  2. Text Color: Neutral/100.

Part 5. Select / Disabled

Duplicate Select / Default and transform it to Select / Filled with the following settings:

  1. Text color: Neutral/60.
  2. Icon color: Neutral/60.
  3. Fill color: Neutral/30.
  4. Stroke color: Neutral/40.
  5. Effects: none:

Part 6. Component and variants

You know the drill.

  1. Create the components.
  2. Combine as variants.

Step 2. Select + Label

Use the Select components and add Input Labels and Input helper texts just like we did in the 2.7 Input chapter. Then convert the groups into components and variants.

Step 3. Select Menu Item

Use the items inside Step 3 Resources Frame to create the Select Menu Item component with appropriate states.

Step 4. Select Menu

Use the Select Menu Item component to create a Select Menu component with the following properties:

  1. Select Menu width: 248 px.
  2. Select Menu Items inside: 6.
  3. Select Menu items Resizing (width) property: Fill container.
  4. Second Select Menu Item set to Selected State.
  5. Padding Top and Bottom: 4 px.
  6. Spacing between items: 0 px.
  7. Fill: Neutral/10.
  8. Stroke: 1 px Neutral/40 Outside.
  9. Border radius: 4 px.
  10. Effect: Shadow 2.
PreviousNext