Molecules are formed by composing atoms. They adhere to the Single Responsibility Principle: doing one tangible job exceptionally well.
Examples of standard UI Molecules:
<FormField>: Combines <Label>, <Input>, and optional <ErrorMessage> or <HelperText>. It handles the accessibility link (aria-describedby) connecting error text to the input.<SearchBar>: Combines <SearchIcon>, <TextInput>, and <ClearButton>.<PaginationControl>: Combines <PrevButton>, page number pills, and <NextButton>.Molecules encourage reuse: instead of every developer re-inventing how an error label connects to an input, the <FormField> molecule guarantees accessibility out of the box.
Level 4 · Component Architecture & Visual Language