import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
import SearchFormBasic from './examples/SearchFormBasic';


# Canvas Kit Examples

## Search Form Basic

A search form has a couple unique attributes to work correctly across platforms.

If you are a SPA and use an `onSubmit` attritbute be sure to also include a `action="."` attribute
to get the correct keyboard on mobile devices.

The form should always have a `role="search"` and the input should be `type="search"`

If you want to use a CKR clear button you will need to hide the webkit default one using the
`::-webkit-search-cancel-button` pseudo selector.

<ExampleCodeBlock code={SearchFormBasic} />