1
resposta

[Sugestão] placeholder no options

Boa tarde prof, estou tentando colocar um placeholder no options só que eu não estou conseguindo, já tentei de todo jeito aqui, vou mandar o código vc me diz se é possível, ou oq eu to fazendo de errado

import './ListaSuspensa.css'

const ListaSuspensa = (props) => {
   const placeholderModificada = `${props.placeholder}...` 
   return (
      <div className='lista-suspensa'>
         <label className='lista-suspensa__label'>
            {props.label}
         </label>
         <select className='lista-suspensa__select'>
            {props.itens.map(item => 
               <option required = {props.obrigatorio} key={item} placeholder= {placeholderModificada} >{item}</option>
            )}
         </select>
      </div>
   )
}

export default ListaSuspensa
import Botao from '../Botao'
import CampoTexto from '../CampoTexto'
import ListaSuspensa from '../ListaSuspensa'
import './Formulario.css'

const Formulario = () => {
    const times = [

        'Programação',
        'Front-end',
        'Data Science',
        'Devops', 'Mobile',
        'Inovação e Gestão'
    ]
    const aoSalvar = (evento) => {
        evento.preventDefault();

        console.log('O form foi submetido')
    }
    return (
        <section className="formulario">
            <form className='formulario__campos' onSubmit={aoSalvar}>
                <h2>Preencha os dados para criar o card do colaborador</h2>
                <CampoTexto obrigatorio = {true} label="Nome" placeholder="Digite seu nome" />
                <CampoTexto obrigatorio = {true} label="Cargo" placeholder="Digite seu cargo" />
                <CampoTexto obrigatorio = {true} label="Imagem" placeholder="Digite o endereço da imagem" />
                <ListaSuspensa obrigatorio = {true} label="Time" itens = {times} placeholder = "Selecione seu cargo" />
                <Botao>
                    Criar Botao
                </Botao>
            </form>
        </section>
    )
}

export default Formulario

O único jeito que eu consegui foi colocando ele como opção na lista

const times = [
        'Selecione seu cargo',
        'Programação',
        'Front-end',
        'Data Science',
        'Devops', 'Mobile',
        'Inovação e Gestão'
    ]

só que eu queria um jeito melhor de fazer isso

1 resposta

Salve, Israel!

Nem o <select> e nem a <option> possuem o atributo placeholder. Normalmente, para atingir um comportamento similar, o que se faz é adicionar uma option sem valor e não selecionável, assim:

<option value="" disabled selected>Selecione...</option>