UI Component LabWeekend in Kyoto
Temples in the morning, tea houses in the afternoon.
UI Component Lab
A field guide to UI components: names, looks, and behavior you can try in place.
45 components
- Orders ship within 2 business days.Returns are accepted within 30 days.Cards and bank transfer are accepted.
Accordion
A vertical stack of headings that each show or hide a section of content.
- Collapse
- Expansion panel
Alert
An important message shown in the page, announced right away without interrupting what the user is doing.
- Inline notification
- ノティフィケーションバナー
- Aiko Tanaka
- Ben Carter
- Chen Wei
- and 2 more
Avatar
A small picture, initial, or icon that stands for a person or account.
Details: AvatarBadge
A small marker on another element, such as an unread count on a notification button.
Details: BadgeBreadcrumb
A row of links to the parent pages of the current page, in order of hierarchy.
- パンくずナビゲーション
Press a button
Button
Triggers an action, such as submitting a form or opening a dialog.
Details: ButtonCard
A box that groups the content and actions about one topic, such as a product or an article.
Details: CardCarousel
Shows a set of slides one at a time, with buttons to move to the previous or next one.
- Slide show
- Image rotator
Checkbox
A small box the user checks or unchecks; any number of options in a group can be checked.
Details: Checkbox- Apple
- Apricot
- Banana
- Blueberry
- Cherry
- Grape
- Lemon
- Mango
- Melon
- Peach
Combobox
A text field with a list of suggestions; the user can pick one or type their own value.
- Autocomplete
Date picker
A field for entering a date, by typing or by choosing from a calendar.
- 日付ピッカー／カレンダー
- Name
- Taro Yamada
- Date of birth
- April 1, 1990
- taro@example.com
- Address
- 1-2-3 Kasumigaseki, Chiyoda-ku, Tokyo
Description list
Pairs of a name and its value or explanation, such as the answers on a confirmation page.
- Descriptions
- Summary list
- 説明リスト
Where can I find my order number?
It is in the confirmation email, next to the order date.
Disclosure
A single button that shows or hides one section of content.
- Details
- Collapse
-
Divider
A thin line that separates sections or groups of content.
- Divider
- Separator
- ディバイダー
Drawer
A panel that slides in from the edge of the screen, over the page.
- Offcanvas
PDF, PNG or JPEG, up to 10 MB each. Or drag and drop files into this area.
No files selected.
File upload
Lets the user choose files from their device, by a button or by dragging them in.
- File uploader
- Upload
- DropZone
- ファイルアップロード／ドロップエリア
To run an action instead of moving to a page, use a button.
Link
Text or an image that takes the user to another page or another place on the same page.
Details: Link- Meeting notes
- Travel plan
- Recipes
List
Items stacked vertically, one per row, often with an icon and a second line of detail.
- 箇条書きリスト
Listbox
A list of options that stays open, from which the user picks one (or several).
- ListBox
- <select size>
Menu
A list of actions that pops up from a button.
- Menu button
- Dropdown
- メニューリストボックス
40% 40GB of 100 GB
Meter
A bar that shows a measurement within a known range, such as storage used or battery level.
- Meter
- Gauge
Modal (Dialog)
A window on top of the page that blocks the rest of the page until it is closed.
- Dialog
- Modal dialog
- モーダルダイアログ
1 to 10
Number input
A box for a number that can also be raised or lowered one step at a time.
- Spinbutton
- Number input
- InputNumber
- Stepper (the − / + buttons)
Showing results 1–10 of 40
Pagination
Controls for moving between pages of a long list, such as search results.
- ページナビゲーション
How shipping is calculated
Orders over $50 ship free. Otherwise the fee depends on the region.
Popover
A small panel that opens next to a button and closes when the user clicks elsewhere.
- Toggletip
Progress bar
A bar that fills up to show how much of a task, such as an upload, is done.
- プログレスインジケーター
Radio
A group of round buttons where exactly one option can be chosen.
- Radio button
Search field
A text box with a search button for finding content across a site.
- Search
- SearchField
- 検索ボックス
Select
Lets the user pick one option from a list that opens on demand.
- Pop-up button
- Dropdown
- セレクトボックス
Skeleton
Gray placeholder shapes that show the layout of content while it loads.
Details: SkeletonSlider
Picks a number within a range by dragging a knob along a track.
- Range
Spinner
A small rotating shape that shows something is loading, without saying how long it will take.
- Loading
- プログレスインジケーター
Split button
A button for the most common action, joined to a small arrow button that opens related actions.
- Combo button
- Applicant
- Address
- Documents
- Review
Step 1 of 4: Applicant
Stepper
Shows the steps of a multi-page procedure, such as an application, and which step the user is on.
- Progress indicator
- Steps
- ステップナビゲーション
Switch
Turns a single setting on or off, with the change taking effect right away.
- Toggle
- Toggle switch
Plan prices Plan Storage Free $0 5 GB Team $12 1 TB Personal $4 100 GB Table
Data arranged in rows and columns, with headings that explain each column.
- Data table
- テーブル／データテーブル
- Name and photo.Email and push settings.Password and sign-in methods.
Tabs
Switches between panels of related content, showing one panel at a time.
- Tab view
- TabList
- Red
- Size M
- Under $50
Tag
A short keyword label used to categorize content or show an applied filter.
- Chip
- チップタグ
- チップラベル
Shown on your profile. Up to 20 characters.
Text field
A box where the user types a short piece of free text, such as a name.
- Text input
- Input
- インプットテキスト
200 characters left
Textarea
A tall box for typing several lines of free text, such as comments or a description.
- Text area
- テキストエリア
Toast
A brief message that pops up at the edge of the screen after an action and disappears on its own.
- Snackbar
Sound is on
Toggle button
A button that stays pressed or unpressed, showing whether an option is on.
Details: Toggle buttonThe quick brown fox jumps over the lazy dog.
Toolbar
A row of related controls, such as text formatting buttons, grouped together.
- Toolbar
- <toolbar> (proposal)
- Copies this page’s address to the clipboard
Tooltip
A short note that appears near an element while it is hovered or focused.
Details: Tooltip - Documents
- Pictures
- readme.txt
Tree view
A nested list, like folders in a file manager, whose branches can be opened and closed.
- Tree view
- Tree