In this tutorial, we will create a search bar in React using Ant Design 5. We will demonstrate how to implement an Ant Design 5 search bar with TypeScript, including an example featuring a search bar with an icon. install & setup vite + react + typescript + ant design 5 Create react ant design 5 simple search bar using react-antd Input component. import { useState } from "react"; import { Input } from "antd"; export default function SearchBar() { const [value, setValue] = useState(""); const onChange = (event) => { setValue(event.target.value); }; const onSearch = (value) => { console.log(value); }; return ( ); } import React from 'react'; import { AudioOutlined } from '@ant-design/icons'; import { Input, Space } from 'antd'; const { Search } = Input; const suffix = ( ); const onSearch = (value: string) => console.log(value); const App: React.FC = () => ( ); export default App; import { useState } from "react"; import { AutoComplete, Input } from "antd"; export default function SearchBar() { const [value, setValue] = useState(""); const options = [ { value: "Option1" }, { value: "Option2" }, { value: "Option3" }, ]; const onSearch = (searchText) => { setValue(searchText); }; const onSelect = (data) => { console.log("onSelect", data); }; return ( ); }

Menu

#OnSearch

react ant design 5 search bar example