Search Field
You can edit 8 Components for free. Get premium for unlimited access.
...
Figma
The Search Field component is used to start a search query within an app.
1. Reference
This component inherits props from the Search Field.
2. State
You can edit the state with the default, active, filled or disabled parameter.
Image 2.1 : State default
Image 2.2 : State active
Image 2.3 : State filled
Image 2.4 : State disabled
3. Size
You can edit the size with the sm, md or lg parameter.
Image 3.1 : Size lg
Image 3.2 : Size md
Image 3.3 : Size sm
4. iconRight
You can edit the iconRight with the true or false parameter.
Image 4.1 : iconRight false
Image 4.1 : iconRight true
Jatpack Compose
The SearchField component is used to start a search query within an app.
1. Reference
This component inherits props from the Search Field.
-
-
-
2. State
You can edit the state with the SearchFieldState.default or SearchFieldState.disabled parameter.
Search field
Search field
placeholder = "Search Field",
text = remember {
mutableStateOf("")
},
size = SearchFieldSize.lg,
state = SearchFieldState.default
)
SearchField(
placeholder = "Search Field",
text = remember {
mutableStateOf("")
},
size = SearchFieldSize.lg,
state = SearchFieldState.disabled
)
3. Size
You can edit the size with the SearchFieldSize.sm, SearchFieldSize.md or SearchFieldSize.lg parameter.
Search field
Search field
Search field
placeholder = "Search Field",
text = remember {
mutableStateOf("")
},
size = SearchFieldSize.lg,
state = SearchFieldState.default
)
SearchField(
placeholder = "Search Field",
text = remember {
mutableStateOf("")
},
size = SearchFieldSize.md,
state = SearchFieldState.disabled
)
SearchField(
placeholder = "Search Field",
text = remember {
mutableStateOf("")
},
size = SearchFieldSize.sm,
state = SearchFieldState.disabled
)
Preview
Preview
Code
DlSearchField(
placeholder: 'Search Field',
)Usage
Add this code example to your project to see how the component works.
DlSearchField(
placeholder: 'Search Field',
size: DlSearchFieldSize.lg,
enabled: true,
)API Reference
DlSearchField is a rounded-full search input that uses a fixed left search icon, and shows a clear action icon on the right as soon as text is entered.
Examples
Size
Preview
Code
Wrap(
spacing: DlSpacingTokens.p_16,
runSpacing: DlSpacingTokens.p_16,
children: [
DlSearchField(
placeholder: 'Search Field',
size: DlSearchFieldSize.lg,
),
DlSearchField(
placeholder: 'Search Field',
size: DlSearchFieldSize.md,
),
DlSearchField(
placeholder: 'Search Field',
size: DlSearchFieldSize.sm,
),
],
)Disabled
Preview
Code
Search field
DlSearchField(
placeholder: 'Search Field',
enabled: false,
)Discover more content
You have questions or need help?
You want to try?
Save time and money?