() => {
const [value, setValue] = useState('');
const style = `
.inputExample {
appearance: none;
font: inherit;
color: inherit;
width: 100%;
padding-inline: var(--grn-field-paddingX);
border: 1px solid var(--grn-field-border-color);
height: var(--grn-textbox-height-m);
border-radius: var(--grn-textbox-radius-m);
transition: var(--grn-transition-leave);
}
.inputExample::placeholder {
color: var(--grn-field-placeholder-color);
}
.inputExample:hover {
border-color: var(--grn-field-border-color-hover);
transition: var(--grn-transition-hover);
}
.inputExample:focus {
border-color: var(--grn-field-border-color-focus);
transition: var(--grn-transition-active);
outline: none;
}
`;
return (
<>
<style>{style}</style>
<input
type="text"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="Placeholder"
className="inputExample"
/>
</>
)}