Within Clerk's documentation, there is guidance on accessing the input field using the appearance prop as demonstrated below:
<SignIn
appearance={{
elements: {
formFieldInput: 'bg-zinc-300/30'
}
}}/>
However, my goal is to change the default value of the input field to display a username for a demo account in a project I'm currently developing.
I attempted to add a placeholder object under formFieldInput like this:
<SignIn
appearance={{
elements: {
formFieldInput: {
placeholder: 'test'
}
}
}}/>
Although this code does not produce any errors, it also does not reflect any changes in the rendered component. Similarly, I experimented with adjusting the value in different ways, such as:
<SignIn
appearance={{
elements: {
formFieldInput: placeholder: 'test'
}
}}/>
and
<SignIn
value='demo'
appearance={{
elements: {
formFieldInput: placeholder: 'test'
}
}}/>
The latter attempt resulted in a parsing error, indicating that a comma was expected. When replacing the semicolon with a comma, the name 'placeholder' could not be recognized.
While I can manually modify these values through the DOM by inspecting and selecting the input element, then changing the placeholder or value properties, I am unsure how to achieve this directly from the component itself.